.demo-trigger { border: 1px solid #bdcb8c; border-radius: 5px; cursor: pointer; padding: 9px 14px 9px 9px; background: #fdfef8; box-shadow: 0 7px 17px #102b2714; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.demo-trigger:hover, .demo-trigger:focus-visible { border-color: var(--lime); box-shadow: 0 10px 23px #102b2725; outline: none; transform: translateY(-2px); }
.demo-trigger .play { display: grid; width: 34px; height: 34px; place-items: center; padding: 0 0 0 2px; border: 0; background: var(--lime); color: var(--ink); box-shadow: inset 0 0 0 1px #8dac42; }
.demo-trigger-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.15; }
.demo-trigger-copy strong { font-size: 12px; }
.demo-trigger-copy small { color: var(--muted); font: 500 9px 'DM Mono', monospace; letter-spacing: .2px; }
.demo-modal { position: fixed; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; padding: 24px; background: #102b27c9; backdrop-filter: blur(6px); }
.demo-modal.is-open { display: flex; }
.demo-panel { position: relative; width: min(900px, 100%); max-height: calc(100vh - 48px); overflow: auto; padding: 32px; border-top: 6px solid var(--lime); border-radius: 5px; background: var(--paper); box-shadow: 0 30px 80px #0008; }
.demo-panel .eyebrow { margin: 0 0 12px; }
.demo-panel h2 { margin: 0 0 24px; font-size: 34px; letter-spacing: -1.5px; }
.demo-close { position: absolute; top: 13px; right: 18px; border: 0; background: transparent; color: var(--ink); font-size: 30px; line-height: 1; cursor: pointer; }
.demo-video { display: block; width: 100%; max-height: min(68vh, 620px); background: #111b1d; border: 8px solid #30383a; border-radius: 5px; object-fit: contain; }
@media (max-width: 620px) { .demo-modal { padding: 14px; } .demo-panel { padding: 26px 16px 16px; } .demo-panel h2 { font-size: 27px; } .demo-video { border-width: 5px; } .demo-trigger { padding-right: 11px; } .demo-trigger-copy small { font-size: 8px; } }