.demo-entry{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin:18px 0 0}
.demo-trigger{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--gold-deep);font-weight:650;text-decoration:none}
.demo-trigger:hover .demo-label{text-decoration:underline;text-underline-offset:4px}
.demo-trigger svg{width:30px;height:30px;flex:none}
.hero-actions .demo-trigger{gap:10px;font-size:15px;color:#fff}
.hero-actions .demo-trigger svg{width:20px;height:20px}
.hero-actions .demo-trigger:hover .demo-label{text-decoration:none}
.demo-time{font-size:12px;font-weight:500;color:var(--muted);border-left:1px solid var(--line-2);padding-left:10px}
.demo-entry>span{color:var(--muted);font-size:12px}
.demo-trigger:focus-visible,.skill-demo button:focus-visible,.skill-demo a:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.skill-demo{border:1px solid var(--line-2);border-radius:20px;padding:0;width:min(1080px,calc(100% - 40px));max-width:none;max-height:calc(100dvh - 40px);color:var(--ink);background:var(--paper);box-shadow:0 32px 100px #0005;overflow:auto}
.skill-demo::backdrop{background:rgba(10,18,31,.78);backdrop-filter:blur(5px)}
.demo-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px}
.demo-head h2{font-family:var(--sans);font-size:20px;line-height:1.4;font-weight:650}
.demo-head p{margin:5px 0 0;font-size:13px;color:var(--muted);line-height:1.6}
.demo-close{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--white);color:var(--ink);cursor:pointer;font:28px/1 var(--sans)}
.demo-close:hover{background:var(--paper-3)}
.demo-screen{background:#101a2b;line-height:0}
.demo-screen video{display:block;width:100%;aspect-ratio:16/9;max-height:calc(100dvh - 220px);object-fit:contain;background:#101a2b}
.demo-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 24px;font-size:12px;color:var(--muted)}
.demo-foot a{color:var(--gold-deep);text-underline-offset:3px;white-space:nowrap}
@media(max-width:600px){.demo-entry{gap:2px 12px}.demo-entry>span{width:100%}.skill-demo{width:calc(100% - 20px);max-height:calc(100dvh - 20px);border-radius:14px}.demo-head{padding:16px;gap:12px;align-items:flex-start}.demo-head h2{font-size:17px}.demo-head p{font-size:12px}.demo-screen video{max-height:calc(100dvh - 210px)}.demo-foot{padding:12px 16px;align-items:flex-start;font-size:11px}}