:root{color:#1f2933;background:#fafafa;font-family:system-ui,-apple-system,Segoe UI,sans-serif}body{margin:0;padding:2rem}main{gap:1.5rem;max-width:960px;margin:0 auto;display:grid}header h1{margin:0;font-size:1.75rem}.playground{gap:1rem;display:grid}@media (width>=768px){.playground{grid-template-columns:1fr 240px}}.card,.preview,.controls{background:#fff;border:1px solid #d8dee4;border-radius:8px;padding:1rem}.card{gap:.75rem;display:grid}.card ul{gap:.25rem;margin:0;padding-left:1.25rem;display:grid}.card li{list-style:outside}.controls button{box-sizing:border-box;border:1px solid #cbd2d9;border-radius:6px;width:100%;padding:.6rem;font-size:1rem}.controls{gap:.75rem;display:grid}.controls .control{gap:.35rem;display:grid}.controls .control input[type=text],.controls .control input[type=range]{box-sizing:border-box;border:1px solid #cbd2d9;border-radius:6px;padding:.6rem}.controls button{cursor:pointer;color:#111827;background:#f3f4f6}.controls button[data-state=paused]{background:#e5e7eb}.status{color:#52606d;flex-direction:column;gap:.25rem;font-size:.85rem;display:flex}.preview-output{background:repeating-linear-gradient(45deg,#cbd2d933 0 12px,#0000 12px 24px);border:1px dashed #cbd2d9;border-radius:6px;place-items:center;min-height:220px;margin-top:.75rem;padding:1rem;display:grid}.preview-output canvas{border-radius:4px;width:100%;height:auto}
/*# sourceMappingURL=demo.d2ee8bb4.css.map */