main.demo{display:grid;grid-template-columns:1.2fr 1fr;gap:38px 8vw;max-width:1500px}.demo-intro h1{font-size:clamp(48px,5.8vw,78px)}.demo-intro>p{color:var(--muted);max-width:540px}.demo-controls{padding-top:28px}.demo-controls button{margin:0 10px 12px 0}.demo-controls input[type=range]{width:100%;padding:0;accent-color:var(--accent);min-height:44px}.demo-controls label{display:flex;justify-content:space-between}.demo-controls output{color:var(--ink)}.views{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:26px}.views figure{margin:0;border-top:1px solid var(--line)}.views figcaption{display:flex;justify-content:space-between;gap:15px;padding:18px 0;font-size:14px}.views figcaption span{color:var(--muted);font-size:12px}.views canvas{display:block;width:100%;aspect-ratio:4/3;background:#202923}.guest-wrap{position:relative}.guest-wrap p{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:25px;background:#202923;margin:0;color:var(--muted)}.demo-caption{grid-column:1/-1;font-size:12px;color:var(--muted);margin:0}.demo>p:last-child{grid-column:1/-1;font-size:14px;margin:0}@media(max-width:740px){main.demo{display:block;padding:28px 22px}.demo-controls{padding-top:20px}.views{display:block;margin:25px 0}.views figure{margin-bottom:24px}.demo-caption{margin:20px 0}.views canvas{aspect-ratio:4/3}.demo>p:last-child a{display:block;margin:14px 0}}
 .guest-wrap{aspect-ratio:4/3}