.px{padding-block:var(--space-7) var(--space-9)}.px__intro{margin-top:var(--space-3);max-width:34rem}.px__presets{gap:var(--space-1);margin-block:var(--space-6) var(--space-4);flex-wrap:wrap;display:flex}.px__layout{gap:var(--space-5);align-items:start;display:grid}@media (min-width:64em){.px__layout{gap:var(--space-6);grid-template-columns:minmax(0,1fr) 18rem}.px__side{top:var(--space-6);max-height:calc(100svh - 2 * var(--space-6));position:sticky;overflow-y:auto}}.px__stage{border-radius:var(--radius-md);background:var(--color-line-soft);height:min(60svh,34rem);position:relative;overflow:hidden}@media (min-width:64em){.px__stage{height:min(72svh,44rem)}}.px__canvas{touch-action:none;position:absolute;inset:0}.px__canvas canvas{width:100%;height:100%;display:block}.px__under{text-align:center;padding:var(--space-4);place-items:center;display:grid;position:absolute;inset:0}.px__actions{gap:var(--space-2);margin-bottom:var(--space-4);flex-wrap:wrap;display:flex}.px__actions .btn{min-height:2.25rem;padding-inline:var(--space-3)}.px__controls{display:grid}.px-group{border-top:var(--border-soft)}.px-group:last-child{border-bottom:var(--border-soft)}.px-group summary{padding-block:var(--space-3);cursor:pointer}.px-group__body{gap:var(--space-4);padding-bottom:var(--space-5);display:grid}.px-field{gap:var(--space-1) var(--space-3);font-size:var(--text-small);grid-template-columns:1fr auto;align-items:center;display:grid}.px-field output{font-family:var(--font-mono);font-size:var(--text-label);color:var(--color-ink-muted)}.px-field input,.px-field select{width:100%;accent-color:var(--color-ink);grid-column:1/-1}.px-field select{padding:var(--space-1) var(--space-2);border:var(--border);border-radius:var(--radius-sm,4px);background:var(--color-bg);color:var(--color-ink);font:inherit}.px-field__hint{color:var(--color-ink-muted);font-size:var(--text-label);grid-column:1/-1}