.demo-frame{border:1px solid color-mix(in srgb, var(--tone) 18%, var(--border));background:var(--surface);box-shadow:0 30px 60px -40px color-mix(in srgb, var(--tone) 60%, #0f172a80);border-radius:28px;overflow:hidden}.demo-bar{border-bottom:1px solid var(--border);background:var(--surface);justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;display:flex}.demo-label{color:var(--heading);align-items:center;gap:10px;font-size:14px;font-weight:800;display:inline-flex}.demo-live{border-radius:var(--r-pill);background:var(--tone);width:26px;height:26px;color:var(--on-accent);box-shadow:0 0 0 4px color-mix(in srgb, var(--tone) 18%, transparent);place-items:center;display:grid}.demo-hint{border-radius:var(--r-pill);background:color-mix(in srgb, var(--tone) 8%, var(--surface-alt));color:var(--text-2);align-items:center;gap:6px;padding:6px 12px;font-size:13px;font-weight:600;display:inline-flex}.demo-hint svg{color:var(--tone)}.demo-body{padding:clamp(16px,3vw,32px)}.demo-frame .pg[data-tone]{--pg:var(--tone)}.demo-frame .pg-panel,.demo-frame .fx-panel{box-shadow:none;background:0 0;border-radius:0;padding:0}.demo-frame .pg-stage{background:color-mix(in srgb, var(--tone) 6%, var(--surface-alt));border-radius:20px;padding:clamp(16px,2.4vw,24px);position:static}.demo-frame .fx-flow{background:color-mix(in srgb, var(--tone) 6%, var(--surface-alt));border-radius:20px;padding:clamp(16px,2.4vw,24px)}.demo-frame .pg,.demo-frame .fx-rules{align-items:center}.demo-frame .pg-controls{align-content:start}@media (max-width:640px){.demo-frame .pg-stage,.demo-frame .fx-flow{margin-inline:-14px;border-radius:0;margin-bottom:-14px}.demo-bar{padding:10px 14px}.demo-hint{display:none}.demo-body{padding:14px}}