*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--demo-bg);color:var(--demo-text);font-family:var(--demo-font-mono);-webkit-font-smoothing:antialiased;min-height:100dvh}.demo{grid-template-rows:auto 1fr;max-width:1400px;min-height:100dvh;margin:0 auto;padding:0 24px 48px;display:grid}.demo__header{border-bottom:1px solid var(--demo-border);margin-bottom:40px;padding:48px 0 36px}.demo__header .demo__header-eyebrow{font-family:var(--demo-font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--demo-accent);margin-bottom:10px;font-size:.62rem}.demo__header .demo__header-title{font-family:var(--demo-font-serif);letter-spacing:-.01em;color:#fff;margin-bottom:12px;font-size:clamp(2rem,5vw,3.5rem);font-style:italic;font-weight:400;line-height:1.1}.demo__header .demo__header-sub{color:var(--demo-muted);max-width:52ch;font-size:.8rem;line-height:1.7}.demo__main{grid-template-rows:auto auto;grid-template-columns:1fr 280px;align-items:start;gap:32px;display:grid}@media (max-width:768px){.demo__main{grid-template-columns:1fr}}.demo__canvas{aspect-ratio:16/9;border:1px solid var(--demo-border);background:#0a0a0a;border-radius:6px;grid-area:1/1;overflow:hidden;box-shadow:0 24px 80px #0009}.demo__controls{flex-direction:column;grid-area:1/2/3;gap:24px;display:flex}.demo__code{grid-area:2/1}