:root { --ink:#14201d; --muted:#687572; --paper:#f4f1ea; --panel:#fbfaf6; --line:#d8ddd8; --green:#138a57; --green-dark:#075438; --blue:#3e56cf; --shadow:0 24px 80px rgb(15 38 29/.13); }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; color:var(--ink); background:var(--paper); font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.45; }
a { color:inherit; }
button,input { font:inherit; }
img { display:block; max-width:100%; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position:fixed; left:16px; top:-60px; z-index:20; padding:10px 14px; border-radius:12px; background:var(--ink); color:#fff; font-weight:700; }
.skip-link:focus { top:16px; }
.demo-nav { position:fixed; z-index:10; inset:0 0 auto; height:76px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px clamp(20px,7vw,120px); border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent); background:color-mix(in srgb,var(--paper) 86%,transparent); backdrop-filter:blur(18px); }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-size:20px; font-weight:850; letter-spacing:-.04em; }
.brand img { width:40px; height:40px; border-radius:12px; }
.brand span span { color:var(--green); }
.demo-nav > p { margin:0; color:var(--muted); font-size:13px; font-weight:700; }
.demo-nav nav { display:flex; gap:20px; align-items:center; font-size:13px; font-weight:800; }
.demo-nav nav a { text-decoration:none; }
.demo-nav nav a:hover { color:var(--green); }
.nav-cta { padding:10px 14px; border-radius:999px; background:var(--green); color:#fff!important; }
.demo-page { max-width:1240px; margin:0 auto; padding:150px 20px 70px; }
.demo-heading { max-width:720px; margin-bottom:42px; }
.kicker { margin:0 0 14px; color:var(--green); font-size:12px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
h1,h2 { margin:0 0 16px; letter-spacing:-.055em; line-height:.98; }
h1 { font-size:clamp(52px,8vw,104px); }
h2 { font-size:clamp(34px,5vw,64px); }
.demo-heading > p:last-child { max-width:600px; margin:0; color:var(--muted); font-size:21px; }
.player-card { padding:14px; border:1px solid #d1dbd3; border-radius:28px; background:var(--panel); box-shadow:var(--shadow); }
video { width:100%; display:block; aspect-ratio:16/9; border-radius:18px; background:#0b1711; }
.player-tools { display:flex; align-items:center; gap:10px; padding:14px 4px 0; color:var(--muted); font-size:13px; }
.player-tools button { min-height:38px; padding:0 14px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); font-weight:800; cursor:pointer; }
.player-tools button:hover { border-color:var(--green); color:var(--green); }
.seek-label { margin-left:auto; font-size:12px; font-weight:750; }
#seek { width:min(320px,30vw); accent-color:var(--green); }
#time { min-width:94px; font-variant-numeric:tabular-nums; }
.download-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:48px; padding:110px 0; border-bottom:1px solid var(--line); }
.download-grid > div:first-child p:last-child,.fine { color:var(--muted); }
.download-links { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.download-links a { display:grid; grid-template-columns:1fr auto; gap:3px 12px; padding:18px; border:1px solid var(--line); border-radius:16px; background:#fff; text-decoration:none; }
.download-links a:hover { border-color:var(--green); transform:translateY(-1px); }
.download-links strong { font-size:15px; }
.download-links span { grid-column:1; color:var(--muted); font-size:12px; }
.download-links a::after { content:""; grid-column:2; grid-row:1 / span 2; align-self:center; color:var(--green); font-size:20px; }
.transcript-card,.scene-card { display:grid; grid-template-columns:.75fr 1.25fr; gap:48px; padding:92px 0; border-bottom:1px solid var(--line); }
.transcript-card pre { min-height:280px; margin:0; padding:22px; overflow:auto; white-space:pre-wrap; border-radius:18px; color:#315744; background:#e8f2eb; font:500 15px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace; }
.scene-card ol { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:0; padding:0; list-style:none; }
.scene-card li { display:grid; grid-template-columns:auto 1fr; gap:2px 12px; padding:18px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.scene-card b { grid-row:1 / span 2; color:var(--green); font:800 13px ui-monospace,SFMono-Regular,Menlo,monospace; }
.scene-card span { font-weight:800; }
.scene-card small { color:var(--muted); }
.demo-footer { display:flex; justify-content:space-between; gap:20px; padding:24px clamp(20px,7vw,120px); border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
.demo-footer a { color:var(--green-dark); font-weight:800; }
@media (max-width:800px) {
  .demo-nav { height:64px; padding:9px 16px; }
  .brand { font-size:18px; }
  .brand img { width:34px; height:34px; border-radius:10px; }
  .demo-nav > p { display:none; }
  .demo-nav nav { gap:10px; font-size:12px; }
  .demo-nav nav a:first-child { display:none; }
  .demo-page { padding:112px 16px 50px; }
  .demo-heading > p:last-child { font-size:17px; }
  .player-card { padding:8px; border-radius:18px; }
  video { border-radius:12px; }
  .player-tools { flex-wrap:wrap; }
  .seek-label { margin-left:0; }
  #seek { order:5; width:100%; }
  #time { min-width:auto; }
  .download-grid,.transcript-card,.scene-card { grid-template-columns:1fr; gap:24px; padding:70px 0; }
  .download-links,.scene-card ol { grid-template-columns:1fr; }
  .demo-footer { flex-wrap:wrap; padding-inline:16px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }