.demo-shell{max-width:1600px;margin:auto;padding:0 var(--gutter)}
.demo-intro{padding:calc(var(--nav-h) + 64px) 0 0;animation:demo-enter .65s ease-out both}
.demo-kicker{font:500 .68rem/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}
.demo-intro-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:9%;align-items:end;margin:22px 0 48px}
.demo-intro h1{font-size:clamp(3rem,5.6vw,5.7rem);line-height:1;letter-spacing:-.065em;font-weight:650}
.demo-intro-grid>div{max-width:430px;padding-bottom:5px}.demo-intro-grid p{font-size:1.06rem;color:#c9c3ba;line-height:1.65}.demo-intro .text-link{margin-top:20px;font-size:.85rem}
.demo-index{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line)}
.demo-index a{display:flex;align-items:center;gap:18px;padding:21px 18px 21px 0;font-size:.84rem;font-weight:600;transition:color .2s}.demo-index a:hover{color:var(--orange)}.demo-index span{font: .65rem var(--mono);color:var(--muted)}
.demo-film{padding:60px 0 64px;border-bottom:1px solid var(--line);scroll-margin-top:96px}
.demo-film-heading{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:end;margin-bottom:26px}
.demo-film h2{font-size:clamp(1.8rem,3vw,3rem);line-height:1.08;letter-spacing:-.045em;font-weight:600;max-width:540px;margin-top:12px}
.demo-film-intro>p:first-child{color:#c9c3ba;font-size:.94rem;line-height:1.65;max-width:560px}
.demo-source{display:flex;flex-wrap:wrap;gap:8px 24px;font: .64rem/1.6 var(--mono);color:var(--muted);margin-top:18px}
.demo-source span{color:var(--text)}
.demo-player{background:#151513;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line)}
.demo-player video{width:100%;height:100%;object-fit:contain;background:#090909}
.demo-below{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;padding-top:23px;align-items:start}
.demo-chapters h3{font:500 .62rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.demo-chapter-buttons{display:flex;flex-wrap:wrap;gap:8px 22px}
.demo-chapter-buttons button{display:flex;align-items:baseline;gap:8px;border:0;border-bottom:1px solid transparent;background:transparent;cursor:pointer;padding:4px 0;text-align:left;font-size:.8rem;transition:border-color .2s,color .2s}
.demo-chapter-buttons button span{font: .61rem var(--mono);color:var(--muted)}
.demo-chapter-buttons button:hover{color:var(--orange);border-color:var(--orange)}
.demo-chapter-buttons button[aria-current=true]{color:var(--orange)}
.demo-status{font-size:.8rem;color:#c9c3ba;min-height:1.6em;margin-top:12px}
.demo-file{font-size:.76rem;justify-self:end;border-bottom:1px solid var(--line);padding-bottom:3px;white-space:nowrap}.demo-file span{color:var(--orange);margin-left:12px}
.demo-close{padding:85px 0 94px;max-width:850px}.demo-close h2{font-size:clamp(2.3rem,4.5vw,4.1rem);font-weight:600;letter-spacing:-.05em;line-height:1.04;margin:18px 0}.demo-close>p:not(.demo-kicker){color:var(--muted);max-width:480px}.demo-close .button{margin-top:28px}
@keyframes demo-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:860px){.demo-intro{padding-top:calc(var(--nav-h) + 40px)}.demo-intro-grid{gap:35px;grid-template-columns:1fr;margin-bottom:30px}.demo-intro-grid>div{max-width:540px}.demo-intro-grid p{font-size:1rem}.demo-index{grid-template-columns:1fr 1fr}.demo-index a:nth-child(-n+2){border-bottom:1px solid var(--line)}.demo-film-heading{grid-template-columns:1fr;gap:19px}.demo-film h2{max-width:550px}.demo-below{grid-template-columns:1fr;gap:20px}.demo-file{justify-self:start}}
@media(max-width:560px){.demo-intro h1{font-size:clamp(2.65rem,10.8vw,3.5rem)}.demo-intro-grid{gap:22px}.demo-kicker{font-size:.59rem}.demo-index a{font-size:.75rem;gap:10px;padding-block:17px}.demo-film{padding:39px 0 36px}.demo-film h2{font-size:2rem}.demo-film-intro>p:first-child{font-size:.9rem}.demo-source{font-size:.58rem;gap:4px 14px}.demo-player{margin-inline:calc(-1 * var(--gutter));border-inline:0}.demo-below{gap:12px;padding-top:20px}.demo-chapter-buttons{gap:9px 18px}.demo-chapter-buttons button{font-size:.77rem;min-height:36px}.demo-close{padding:55px 0 65px}}
@media(prefers-reduced-motion:reduce){.demo-intro{animation:none}.demo-index a,.demo-chapter-buttons button{transition:none}}