:root{
  --bg:#f7fafc;
  --panel:#ffffff;
  --muted:#6b7280;
}
html,body{height:100%;margin:0;font-family:Segoe UI, Roboto, Arial, sans-serif;background:var(--bg);color:#111827}
header{padding:18px 24px;border-bottom:1px solid #e6e8eb}
header h1{margin:0;font-size:18px}
.controls{display:flex;gap:16px;align-items:center;padding:12px 24px}
.controls label{font-size:14px;color:var(--muted)}
.controls input[type=range]{width:220px}
.panels{display:flex;gap:12px;padding:12px 24px}
.panel{background:var(--panel);box-shadow:0 1px 3px rgba(16,24,40,0.06);padding:8px;border-radius:6px;flex:1}
.panel h2{margin:6px 0 8px 0;font-size:14px}
canvas{width:100%;height:auto;border:1px solid #e6e8eb;background:#fff}
footer{padding:12px 24px;font-size:13px;color:var(--muted)}

.panel canvas{display:block}