/* AI video example watch pages (/examples/) — layered on tool.css, same tokens. */
.ex-page{padding-top:28px;padding-bottom:40px}
.ex-crumbs{font-size:13px;color:var(--tp-dim);margin:0 0 22px}
.ex-crumbs a{color:var(--tp-muted);text-decoration:none}
.ex-crumbs a:hover{color:#fff}
.ex-top{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);gap:40px;align-items:start}
.ex-top.is-tall{grid-template-columns:minmax(260px,400px) minmax(0,1fr)}
.ex-player{border-radius:var(--tp-r);overflow:hidden;background:#000;border:1px solid var(--tp-line)}
.ex-player video{display:block;width:100%;height:auto}
.ex-h1{font-size:clamp(34px,4.6vw,60px);line-height:.95}
.ex-h1 span{color:#c4b5fd}
.ex-head .tp-chips{margin-bottom:14px}
.ex-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 16px}
.ex-specs div{background:var(--tp-card);border:1px solid var(--tp-line);border-radius:12px;padding:10px 12px}
.ex-specs dt{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--tp-dim);margin-bottom:3px}
.ex-specs dd{margin:0;font-weight:700;color:var(--tp-text)}
.ex-cost{color:var(--tp-muted);font-size:14px;line-height:1.5;margin:0 0 20px}
.ex-sec{margin-top:52px;max-width:860px}
.ex-sec .tp-sec-head,.ex-sec:last-child{max-width:none}
.ex-sec p{color:#d6d3e8;font-size:17px;line-height:1.65}
.ex-sec a{color:#c4b5fd}
.ex-prompt{background:var(--tp-card2);border:1px solid var(--tp-line2);border-radius:var(--tp-r);padding:20px 22px}
.ex-prompt p{margin:0 0 16px;font-size:17px;color:var(--tp-text)}
.ex-prompt-actions{display:flex;flex-wrap:wrap;gap:10px}
.ex-note-inline{font-size:15px!important;color:var(--tp-muted)!important}
.ex-steps{margin:0 0 20px;padding-left:22px;color:#d6d3e8;font-size:17px;line-height:1.65}
.ex-steps li{margin-bottom:8px}
.ex-source{display:inline-flex;align-items:center;gap:14px;background:var(--tp-card);border:1px solid var(--tp-line);border-radius:14px;padding:10px 16px 10px 10px;text-decoration:none;color:#fff}
.ex-source img{width:64px;height:64px;object-fit:cover;border-radius:10px}
.ex-source small{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--tp-dim)}
.ex-also{font-size:15px!important}
.ex-limit{border-left:3px solid var(--tp-p);padding:4px 0 4px 14px;color:var(--tp-muted)!important;font-size:16px!important}
.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.ex-card{position:relative;display:block;border-radius:14px;overflow:hidden;background:#000;border:1px solid var(--tp-line);aspect-ratio:4/5;text-decoration:none;color:#fff}

.ex-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.ex-card:hover img{transform:scale(1.03)}
.ex-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.85))}
.ex-card b{position:absolute;left:12px;right:12px;bottom:10px;z-index:1;font-size:14px;line-height:1.25}
.ex-card-tag{position:absolute;top:10px;left:10px;z-index:1;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:rgba(0,0,0,.6);border:1px solid var(--tp-line2);padding:3px 7px;border-radius:999px}
.ex-cats{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0}
.ex-cats a{padding:7px 12px;border-radius:999px;border:1px solid var(--tp-line2);background:var(--tp-card);color:#e9e5ff;text-decoration:none;font-size:14px;font-weight:700}
.ex-card:focus-visible,.ex-cats a:focus-visible,.ex-source:focus-visible{outline:2px solid #c4b5fd;outline-offset:2px}
@media (max-width:860px){.ex-top,.ex-top.is-tall{grid-template-columns:1fr;gap:24px}.ex-top.is-tall .ex-player{max-width:420px}}
@media (prefers-reduced-motion:reduce){.ex-card img{transition:none}.ex-card:hover img{transform:none}}