.explorable-demo{padding:30px 0 82px}.explorable-demo>header{justify-content:space-between;align-items:center;gap:30px;min-height:136px;display:flex}.explorable-demo>header span{color:var(--accent);font:12px/1 var(--font-data)}.explorable-demo h2{font:400 38px/1.1 var(--font-brand);margin:12px 0 0}.explorable-demo>header>strong{border:1px solid var(--accent);color:var(--accent);font:12px/1 var(--font-data);padding:12px 15px}.explorable-grid{border:1px solid var(--line-strong);background:var(--surface);grid-template-columns:1fr 390px;display:grid}.toy-canvas{min-height:560px;position:relative}.toy-canvas canvas{width:100%;height:100%;display:block}.toy-canvas span{color:var(--dim);font:11px/1 var(--font-data);position:absolute;bottom:14px;left:16px}.toy-controls{border-left:1px solid var(--line);background:var(--surface-2);align-content:start;gap:32px;padding:28px;display:grid}.toy-actions{grid-template-columns:1fr 1fr;gap:6px;display:grid}.toy-actions button{border:1px solid var(--line);cursor:pointer;min-height:46px;font:12px/1 var(--font-data);background:0 0}.toy-actions button:hover{border-color:var(--accent)}.toy-controls label{grid-template-columns:1fr auto}.toy-controls label input{grid-column:1/-1;width:100%}.toy-controls output{color:var(--accent)}.explorable-demo>p{border-left:1px solid var(--accent);max-width:840px;color:var(--muted);padding-left:18px;font-size:17px}@media (max-width:1100px){.explorable-grid{grid-template-columns:1fr 320px}.toy-canvas{min-height:500px}}@media (max-width:720px){.explorable-demo>header{flex-direction:column;align-items:flex-start;padding:30px 0}.explorable-grid{grid-template-columns:1fr}.toy-canvas{min-height:390px}.toy-controls{border-left:0;border-top:1px solid var(--line)}.review-switcher{justify-content:space-between;left:12px;right:12px}.review-switcher select{max-width:65%}}