/* Coordinates in the tutorial follow the entire 1920 × 1080 recording. */
#slide-07-nacion .nac-tutorial { display: grid; grid-template-columns: minmax(0, 1fr) 382px; align-items: center; gap: 42px; flex: 1; min-height: 0; margin-top: 28px; }
.nac-film { min-width: 0; overflow: hidden; border: 1px solid var(--rule-2); border-radius: 16px; background: #101411; box-shadow: 0 24px 50px -36px #183b32; }
.nac-film-bar { display: flex; align-items: center; gap: 18px; padding: 15px 20px; color: #d9e5de; font-family: var(--font-product); }
.nac-film-bar b { color: #a4d6c4; font-size: 17px; font-weight: 500; }
.nac-film-bar span { border-left: 1px solid #52645a; padding-left: 18px; font-size: 11px; letter-spacing: .13em; }
.nac-screen { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.nac-screen video { display: block; width: 100%; height: 100%; object-fit: contain; }
.nac-annotations { position: absolute; inset: 0; pointer-events: none; }
.nac-annotations[hidden], .nac-video-error[hidden] { display: none; }
.nac-pointers { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 2px #000); }
.nac-focus { fill: #b5f3d609; stroke: #b5f3d6; stroke-width: 2; }
.nac-connector { fill: none; stroke: #b5f3d6; stroke-width: 2; stroke-linejoin: round; }
.nac-dot { fill: #b5f3d6; }
.nac-callout { position: absolute; width: 350px; padding: 20px 22px 21px; border: 1px solid #8cb7a4; border-radius: 12px; background: #f5faf7; color: #182e25; box-shadow: 0 12px 32px #0005; font-family: var(--font-product); }
.nac-cue-number { display: block; color: #39745e; font-size: 11px; font-weight: 600; letter-spacing: .13em; margin-bottom: 9px; }
.nac-callout h2 { margin: 0; font-size: 23px; line-height: 1.12; font-weight: 600; letter-spacing: -.02em; }
.nac-callout p { margin: 10px 0 0; font-size: 18px; line-height: 1.4; color: #385247; text-wrap: pretty; }
.nac-controls { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 9px 16px; background: #eff4f1; color: #294a3b; font: 13px var(--font-product); }
.nac-controls button, .nac-controls select { appearance: none; border: 1px solid #b9ccc2; border-radius: 7px; background: #fff; color: inherit; font: 500 13px var(--font-product); padding: 8px 12px; cursor: pointer; }
.nac-controls button:hover { background: #dbece2; }
.nac-controls input { flex: 1; min-width: 0; accent-color: #276850; cursor: pointer; }
.nac-controls output { min-width: 90px; text-align: center; font-variant-numeric: tabular-nums; }
.nac-controls button:focus-visible, .nac-controls input:focus-visible, .nac-controls select:focus-visible, .nac-chapters button:focus-visible { outline: 2px solid #276850; outline-offset: 3px; }
.nac-guide { min-width: 0; }
.nac-guide-eyebrow { margin: 0 0 19px; font: 600 12px var(--font-product); letter-spacing: .13em; color: var(--acc); }
#slide-07-nacion .nac-guide .head { font-size: 38px; line-height: 1.08; text-wrap: pretty; }
.nac-guide-intro { margin: 20px 0 24px; color: var(--tx2); font: 17px/1.5 var(--font-product); }
.nac-chapters { display: grid; gap: 5px; }
.nac-chapters button { display: flex; align-items: center; gap: 13px; text-align: left; width: 100%; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--tx2); font: 16px var(--font-product); padding: 12px; cursor: pointer; }
.nac-chapters button span:first-child { font-size: 12px; color: var(--acc); font-variant-numeric: tabular-nums; }
.nac-chapters button:hover { background: #eff4f1; }
.nac-chapters button[aria-current="step"] { background: #e8f1ec; border-color: #9ab8a8; color: #18523c; font-weight: 600; }
.nac-guide-note { margin: 22px 0 0; color: var(--tx3); font: 13px/1.5 var(--font-product); }
.nac-video-error { position: absolute; inset: 35% 15%; display: grid; place-content: center; padding: 24px; background: #f5faf7; color: #182e25; border-radius: 12px; font: 20px/1.5 var(--font-product); }
@media (prefers-reduced-motion: reduce) { .nac-callout { animation: none; } }