/* Video-specific behavior on the existing Design Library tokens and layout. */
.hero { padding-top: 28px; padding-bottom: 28px; }
.browse-section { padding-top: 28px; }
.video-card .card-preview { height: auto; aspect-ratio: 16/10; background: #16231f; }
.video-cover-fill { position:absolute; inset:-16px; width:calc(100% + 32px); height:calc(100% + 32px); object-fit:cover; filter:blur(18px) brightness(.42); }
.video-cover { position:relative; display:block; width:100%; height:100%; object-fit:contain; }
.video-card .card-title-button { margin-top:12px; }
.video-card .card-summary { min-height:0; }
.video-card .card-category { font-size:14px; letter-spacing:.06em; }
.method-card .card-preview { background:#f1eee4; }
.method-card .video-cover-fill { opacity:.45; }
.method-card .video-cover { padding:8px; }
.method-card .card-category { color:var(--teal); }
.method-cover-open { position:absolute; inset:0; z-index:1; width:100%; height:100%; border:0; background:transparent; cursor:pointer; }
.method-cover-open:focus-visible { outline:3px solid var(--teal); outline-offset:-4px; }
.method-badge { max-width:calc(100% - 24px); font-weight:700; }
.method-preview { margin:0 0 18px; padding:12px; background:var(--surface-soft); border:1px solid var(--line); }
.method-preview img { display:block; width:100%; max-height:min(59vh,590px); object-fit:contain; }
.method-preview figcaption { margin-top:10px; }
.method-related { border-top:1px solid var(--line); margin-top:26px; padding-top:16px; }
.method-related h3 { margin-top:0; }
.example-count { position:absolute; left:12px; top:12px; padding:5px 9px; background:var(--surface); color:var(--ink); font-size:14px; }
.video-detail-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr); gap:32px; }
.variant-field { display:flex; flex-direction:column; gap:7px; margin-bottom:20px; font-weight:650; }
.variant-field select { width:100%; padding:11px; border:1px solid var(--line); color:var(--ink); background:var(--surface); }
.media-stage { position:relative; display:flex; justify-content:center; align-items:center; background:#101a17; min-height:300px; height:min(59vh,590px); }
.media-stage video,.media-stage img { display:block; width:100%; height:100%; max-height:590px; object-fit:contain; }
.media-stage .media-unavailable { padding:32px; color:#fff; }
.video-gallery .preview-arrow { z-index:2; }
.video-gallery .preview-carousel { position:relative; }
.gallery-footer { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:10px 0 18px; }
.gallery-caption { margin:0; font-size:14px; color:var(--ink-soft); }
.gallery-position { flex-shrink:0; color:var(--muted); font-size:14px; }
.gallery-actions { display:flex; flex-wrap:wrap; gap:10px; }
.download-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0; }
.download-grid a,.download-grid .download-unavailable { display:flex; flex-direction:column; justify-content:center; padding:12px; border:1px solid var(--line); color:var(--ink); text-decoration:none; }
.download-grid a:hover { border-color:var(--teal); background:var(--surface-soft); }
.download-grid small { font-size:12px; font-weight:400; color:var(--ink-soft); margin-top:4px; }
.download-unavailable { background:var(--surface-soft); }
.video-facts { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0; }
.video-facts div { border-top:1px solid var(--line); padding-top:10px; }
.video-facts dt { font-size:14px; color:var(--muted); }
.video-facts dd { margin:3px 0 0; overflow-wrap:anywhere; }
.video-guidance { white-space:pre-line; color:var(--ink-soft); }
.video-detail-info h3 { margin:22px 0 8px; }
.review-details,.source-details { border-top:1px solid var(--line); margin-top:20px; padding-top:14px; }
.review-details summary,.source-details summary { cursor:pointer; font-weight:650; }
.review-row { margin:15px 0; }
.review-row p { margin:4px 0; color:var(--ink-soft); }
.hash { font-family:ui-monospace,monospace; font-size:12px; overflow-wrap:anywhere; }
.style-rules { white-space:pre-wrap; font-family:var(--sans); font-size:14px; max-height:460px; overflow:auto; }
.detail-actions-top { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:24px; }
#prompt-text { width:100%; resize:vertical; padding:15px; background:var(--surface-soft); color:var(--ink); border:1px solid var(--line); font:14px/1.6 ui-monospace,monospace; }
.prompt-actions { display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
.methods-note { padding:20px; border:1px solid var(--line); background:var(--surface-soft); margin-top:28px; }
.methods-note ul { display:flex; flex-wrap:wrap; gap:8px 24px; padding-left:20px; }
.process-main { max-width:1050px; margin:auto; padding:36px 24px 90px; }
.process-main h1 { max-width:800px; }
.process-main h2 { font:32px/1.15 var(--serif); margin-top:35px; }
.process-main p,.process-main li { max-width:78ch; }
.process-film { background:#101a17; text-align:center; margin:28px 0; }
.process-film video { width:100%; max-height:70vh; }
.process-image { max-width:100%; max-height:600px; object-fit:contain; background:var(--surface-soft); }
.process-figures { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.process-figures figure { margin:0; }
.process-figures figcaption { color:var(--ink-soft); font-size:14px; margin-top:8px; }
@media(max-width:900px) { .video-detail-layout { grid-template-columns:1fr; gap:18px; } .media-stage { height:min(65vh,560px); } .process-figures { grid-template-columns:1fr; } .hero-aside { display:none; } .hero { grid-template-columns:1fr; } .download-grid { gap:8px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .template-card { transition:none; } .template-card:hover { transform:none; } }

.about-section { padding:32px clamp(20px,4vw,56px); border-top:1px solid var(--line); }
.about-section p { max-width:78ch; }
.video-loading { padding:40px 0; color:var(--ink-soft); }
.card-play { position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; background:transparent; cursor:pointer; display:grid; place-items:center; z-index:1; }
.play-symbol { width:58px; height:58px; display:grid; place-items:center; padding-left:4px; border-radius:50%; background:rgba(250,248,237,.94); color:#153d30; border:1px solid rgba(255,255,255,.8); box-shadow:0 3px 22px #0005; font-size:25px; transition:transform .15s; }
.card-play:hover .play-symbol { transform:scale(1.08); }
.card-play:focus-visible { outline:3px solid var(--teal); outline-offset:-4px; }
.video-card .card-preview-open { z-index:3; }
.video-card .example-count { z-index:2; pointer-events:none; }
.quick-player { width:min(620px,calc(100vw - 24px)); max-height:94vh; }
.quick-player .dialog-frame { padding:20px; }
.quick-title { margin:0; font:26px/1.15 var(--serif); }
.quick-stage { background:#101a17; text-align:center; }
.quick-stage video { display:block; width:100%; max-height:63vh; aspect-ratio:9/16; object-fit:contain; }
.quick-player .variant-field { margin:12px 0; }
.quick-player .dialog-topline { margin-bottom:14px; }
@media(prefers-reduced-motion:reduce) { .play-symbol { transition:none; } .card-play:hover .play-symbol { transform:none; } }
/* Separate editorial, examples and technical pages. */
.below-preview-link { display:inline-block; margin:14px 0 4px; color:var(--teal); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.download-section { margin:24px 0; border-top:1px solid var(--line); padding-top:12px; }
.download-section h3 { margin:0 0 12px; }
.detail-page-links { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:24px 0; }
.back-link { display:inline-block; margin-bottom:28px; color:var(--teal); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.example-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:24px; margin:32px 0; }
.example-card { border:1px solid var(--line); background:var(--surface); padding:16px; }
.example-card-cover { background:#101a17; text-align:center; }
.example-card video { width:100%; aspect-ratio:9/14; max-height:370px; object-fit:contain; display:block; }
.example-card h2 { font:25px/1.2 var(--serif); margin:8px 0; }
.example-card .eyebrow { margin:14px 0 0; }
.example-card-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:16px; }
.usage-prompt { width:100%; min-height:420px; padding:16px; background:var(--surface-soft); color:var(--ink); border:1px solid var(--line); font:14px/1.55 ui-monospace,monospace; resize:vertical; }
.technical-facts { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr)); gap:12px; }
.technical-facts div { border-top:1px solid var(--line); padding-top:9px; overflow-wrap:anywhere; }
.technical-facts dt { color:var(--muted); font-size:14px; }
.technical-facts dd { margin:3px 0; }
.technical-table { width:100%; border-collapse:collapse; margin:18px 0; font-size:14px; }
.technical-table th,.technical-table td { border:1px solid var(--line); padding:9px; text-align:left; vertical-align:top; }
.technical-table th { background:var(--surface-soft); }
.technical-prose { overflow-x:auto; }
.technical-code { white-space:pre-wrap; overflow-wrap:anywhere; overflow:auto; max-height:600px; padding:16px; border:1px solid var(--line); background:var(--surface-soft); font:13px/1.5 ui-monospace,monospace; }
.technical-video { display:block; max-width:100%; max-height:55vh; margin:20px 0; background:#101a17; }
.usage-choice { display:flex; align-items:center; gap:20px; padding:16px; border:1px solid var(--line); background:var(--surface-soft); margin:24px 0; }
.usage-choice img { width:110px; height:125px; object-fit:contain; background:#101a17; }
.usage-choice h2 { margin:4px 0; font:27px/1.15 var(--serif); }
.usage-choice p { margin:3px 0; }
.brief-label,.output-label { display:block; font-weight:700; margin:30px 0 8px; }
.brief-textarea { width:100%; min-height:96px; padding:13px; background:var(--surface); color:var(--ink); border:1px solid var(--line); font:inherit; resize:vertical; }
.brief-help { margin:8px 0 20px; color:var(--ink-soft); font-size:14px; }
@media(max-width:600px) { .usage-choice { align-items:flex-start; } .usage-choice img { width:82px; height:100px; } }