/* ============================================================
   demo.css — the demo video's watch page (/demo/).
   Layers on ao-page.css; the only thing it really owns is making
   the player the biggest thing on the page, which is the whole
   point of a watch page (see apps/core/demo_video.py).
   ============================================================ */

.ao-demo-h1{
  font-family:'JetBrains Mono',monospace;font-weight:800;
  font-size:clamp(22px,3vw,30px);letter-spacing:-1px;
  color:var(--ink);margin:0 0 20px;
}

.ao-demo-player{
  position:relative;
  margin:0 0 28px;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:#08090A;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.55);
}
/* object-fit:contain, unlike the cropped home-page embed: here the video is
   the content, so nothing may be cut off. */
.ao-demo-player video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#08090A}

.ao-demo-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;font-family:'JetBrains Mono',monospace;font-size:12px}
.ao-demo-meta span{border:1px solid var(--line);background:var(--chip-bg);color:var(--muted);border-radius:999px;padding:5px 11px}

.ao-demo-lede{color:var(--muted);font-size:16px;line-height:1.7;margin:0 0 32px;max-width:680px}

.ao-demo-h2{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:18px;letter-spacing:-.4px;color:var(--ink);margin:0 0 14px}

.ao-demo-chapters{list-style:none;margin:0 0 36px;padding:0;border-top:1px solid var(--line)}
.ao-demo-chapters li{border-bottom:1px solid var(--line)}
.ao-demo-chapters button{
  display:flex;gap:16px;align-items:baseline;width:100%;text-align:left;
  background:none;border:0;padding:15px 12px;cursor:pointer;transition:background .15s;
}
.ao-demo-chapters button:hover{background:var(--bar-bg)}
.ao-demo-chapters .t{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent-ink);flex-shrink:0;width:44px}
.ao-demo-chapters .n{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;color:var(--ink);display:block;margin-bottom:4px}
.ao-demo-chapters .b{color:var(--muted);font-size:14px;line-height:1.6;display:block}

.ao-demo-cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 8px}
.ao-demo-cta a{
  font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;
  padding:12px 20px;border-radius:9px;text-decoration:none;border:1px solid var(--line);
  color:var(--ink);background:var(--panel);transition:.15s;
}
.ao-demo-cta a:hover{border-color:var(--accent)}
.ao-demo-cta a.primary{background:var(--accent);border-color:var(--accent);color:#08090A}

@media(max-width:700px){
  .ao-demo-chapters button{padding:13px 4px;gap:12px}
  .ao-demo-chapters .t{width:38px}
}