/* Demonstration additions for index.html. */
html{scrollbar-gutter:stable}
.demo-kicker{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--teal);margin-bottom:8px}
.demo-invitation{margin-top:36px;padding:25px 28px;border:1px solid var(--line-2);border-left:3px solid var(--red);border-radius:0 14px 14px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;background:rgba(255,255,255,.025)}
.demo-invitation p{max-width:55ch;color:var(--bone-2);font-size:16px}
.demo-invitation small{display:block;margin-top:9px;color:var(--mute);font-size:12px;line-height:1.5}
.demo-action{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:13px 18px;background:var(--red);border:1px solid var(--red);border-radius:9px;color:#fff;font:600 14px/1.4 var(--f-body);text-decoration:none;text-align:center;cursor:pointer;transition:background .2s,border-color .2s;flex-shrink:0}
.demo-action:hover{background:#ba1a23;border-color:#ba1a23}
.demo-action:focus-visible,.demo-close:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
.demo-duration{border-left:1px solid rgba(255,255,255,.35);padding-left:12px;white-space:nowrap;font-family:var(--f-mono);font-size:11px;font-weight:400}
.demo-action-secondary{background:transparent;border-color:var(--line-2)}
.demo-action-secondary:hover{background:var(--red);border-color:var(--red)}



.demo-card-action{align-self:flex-start;margin-top:6px;padding:10px 14px;min-height:44px;font-size:13px}
.oc:not(.is-focus) .demo-card-action{visibility:hidden}
.demo-dialog{padding:0;border:1px solid var(--line-2);border-radius:18px;background:#111115;color:var(--bone);width:min(1160px,calc(100vw - 36px));max-width:none;max-height:calc(100dvh - 36px);margin:auto;box-shadow:0 35px 130px rgba(0,0,0,.7);overflow:auto;overscroll-behavior:contain}
.demo-dialog::backdrop{background:rgba(0,0,0,.87);backdrop-filter:blur(5px)}
.demo-dialog-inner{min-width:0}
.demo-dialog-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 26px}
.demo-dialog h2{font-size:clamp(23px,3vw,36px);line-height:1.12;font-variation-settings:"wdth" 104}
.demo-close{appearance:none;flex-shrink:0;display:flex;align-items:center;gap:12px;min-height:44px;border:1px solid var(--line-2);border-radius:8px;background:transparent;color:var(--bone);padding:9px 14px;cursor:pointer;font:500 14px/1.3 var(--f-body)}
.demo-close:hover{background:#29292f}
.demo-close span{font-size:26px;line-height:1}
.demo-video{display:block;width:100%;max-height:calc(100dvh - 240px);min-height:160px;aspect-ratio:16/9;object-fit:contain;background:#000}
.demo-dialog-footer{display:flex;justify-content:space-between;align-items:start;gap:24px;padding:20px 26px;border-top:1px solid var(--line)}
.demo-dialog-footer p{font-size:14px;line-height:1.6;color:var(--bone-2);max-width:80ch}
.demo-return{font:10px/1.6 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mute);max-width:20ch;flex-shrink:0}
.demo-status{padding:14px 26px;font-size:14px;color:var(--bone-2);background:#25151a}
.demo-status a{color:#fff;text-underline-offset:3px}











.demo-open .hero-photo img,.demo-open .aw{animation-play-state:paused}
@media(max-width:900px){.demo-invitation{align-items:flex-start;flex-direction:column}.demo-invitation .demo-action{flex-shrink:1}.demo-dialog-footer{display:block}.demo-return{display:block;max-width:none;margin-top:9px}}
@media(max-width:600px){.demo-invitation{padding:20px}.demo-action{font-size:13px;gap:9px;padding:12px 14px;flex-wrap:wrap}.demo-duration{font-size:10px;padding-left:9px}.demo-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:12px}.demo-dialog-header{padding:18px 16px;gap:12px}.demo-dialog .demo-kicker{font-size:9px;letter-spacing:.08em}.demo-close{padding:8px 10px;font-size:12px;gap:7px}.demo-dialog-footer{padding:18px 16px}.demo-video{max-height:55dvh;min-height:0}.demo-return{font-size:9px}.demo-status{padding:12px 16px}}
@media(max-height:600px) and (min-width:700px){.demo-dialog-header{padding:12px 20px}.demo-dialog h2{font-size:24px}.demo-video{max-height:calc(100dvh - 180px);min-height:100px}.demo-dialog-footer{padding:12px 20px}}
@media(prefers-reduced-motion:reduce){.demo-action{transition:none}}