.demo-section{width:min(1060px,100% - 96px);margin:0 auto 74px}.demo-card{--demo-border:var(--lightningcss-light,#bdc6aa)var(--lightningcss-dark,#5a664b);margin:0}.demo-mat{border:1px solid var(--demo-border);background:repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--demo-border) 38%, transparent) 3px 4px);border-radius:5px;padding:13px;position:relative}.demo-mat:before,.demo-mat:after{content:"";border-color:var(--ink);pointer-events:none;border-style:solid;width:25px;height:25px;position:absolute}.demo-mat:before{border-width:2px 0 0 2px;border-top-left-radius:5px;top:-1px;left:-1px}.demo-mat:after{border-width:0 2px 2px 0;border-bottom-right-radius:5px;bottom:-1px;right:-1px}.demo-screen{background:#1b2019;border:1px solid #27292140;border-radius:4px;position:relative;overflow:hidden}.demo-screen video{aspect-ratio:1670/1080;object-fit:contain;width:100%;height:auto;display:block}.demo-screen video:focus-visible{outline:3px solid var(--lime);outline-offset:-4px}.demo-play{color:#fff;text-align:left;background:linear-gradient(#0000 50%,#11180dd9);border:0;align-items:flex-end;gap:14px;width:100%;padding:28px;display:flex;position:absolute;inset:0}.demo-play:focus-visible{outline:3px solid var(--lime);outline-offset:-5px}.demo-play-icon{color:#272921;background:var(--lime);border:1px solid #efffc2;border-radius:50%;flex-shrink:0;place-items:center;width:58px;height:58px;padding-left:3px;font-size:19px;transition:transform .18s,box-shadow .18s;display:grid;box-shadow:0 0 0 6px #dff49a20}:where(.demo-play:hover) .demo-play-icon{transform:scale(1.07);box-shadow:0 0 0 9px #dff49a20}.demo-play-copy{align-self:flex-end;gap:7px;padding-block:8px;display:grid}.demo-play-copy strong{letter-spacing:-.3px;font-size:18px;font-weight:500}.demo-play-copy>span{color:#e0e5d6;font-size:12px}.demo-play-duration{font-variant-numeric:tabular-nums;border:1px solid #ffffff4d;border-radius:4px;margin:0 0 13px auto;padding:5px 8px;font-size:11px}.demo-error{padding:0 4px 14px;font-size:12px;line-height:1.5}.demo-error a{text-decoration:underline}.demo-card-compact{--demo-border:#627052;--ink:#dce5cb;width:min(100%,360px);margin:25px 0 0}.demo-card-compact .demo-mat{padding:6px}.demo-card-compact .demo-play{gap:10px;padding:15px}.demo-card-compact .demo-play-icon{width:38px;height:38px;font-size:13px}.demo-card-compact .demo-play-copy{gap:4px;padding-block:4px}.demo-card-compact .demo-play-copy strong{font-size:13px}.demo-card-compact .demo-play-copy>span{font-size:9px}.demo-card-compact .demo-play-duration{display:none}@media (max-width:600px){.demo-section{width:calc(100% - 32px);margin-bottom:45px}.demo-card-hero .demo-mat{padding:7px}.demo-card-hero .demo-play{gap:12px;padding:18px}.demo-card-hero .demo-play-icon{width:43px;height:43px;font-size:15px}.demo-card-hero .demo-play-copy{gap:5px;padding-block:4px}.demo-card-hero .demo-play-copy strong{font-size:15px}.demo-card-hero .demo-play-copy>span{font-size:10px}.demo-card-hero .demo-play-duration{display:none}}