.pg{--pg-control-height:2rem;--pg-head-height:2.25rem;--pg-head-gap:.5rem;grid-template-columns:minmax(0,1fr);gap:1.5rem;margin-top:1.5rem;display:grid}.sl-markdown-content details{border-top:1px solid var(--sl-color-gray-5);margin-top:2.5rem;padding-top:1rem}.sl-markdown-content details>summary{cursor:pointer;color:var(--sl-color-gray-2);font-size:var(--sl-text-sm)}.sl-markdown-content details>summary:hover{color:var(--sl-color-white)}.sl-markdown-content details>:not(summary){font-size:var(--sl-text-sm)}@media (width>=60rem){.pg{grid-template-columns:minmax(22rem,2fr) minmax(0,3fr);align-items:start}.pg-tabs,.pg-note,.pg-look{grid-column:1/-1}}.pg-tabs{flex-wrap:wrap;gap:.35rem;margin-bottom:-.75rem;display:flex}.pg-tab{height:var(--pg-control-height);color:var(--sl-color-gray-2);font-size:var(--sl-text-sm);white-space:nowrap;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:.4rem;padding:0 .75rem;line-height:1}.pg-tab:hover{background:var(--sl-color-gray-6);color:var(--sl-color-white)}.pg-tab-on,.pg-tab-on:hover{border-color:var(--sl-color-accent);background:var(--sl-color-accent-low);color:var(--sl-color-white)}.pg-note{color:var(--sl-color-gray-3);font-size:var(--sl-text-xs);flex-wrap:wrap;align-items:baseline;gap:.75rem;margin:0;display:flex}.pg-reset{color:var(--sl-color-text-accent);font-size:var(--sl-text-xs);cursor:pointer;background:0 0;border:none;padding:0;text-decoration:underline}.pg-look{flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;margin-top:-.5rem;display:flex}.pg-look-field{flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0;display:flex}.pg-look-label{color:var(--sl-color-gray-2);font-size:var(--sl-text-xs)}.pg-swatches{flex-wrap:wrap;gap:.3rem;display:flex}.pg-swatch{height:var(--pg-control-height);color:var(--sl-color-gray-2);font-size:var(--sl-text-xs);white-space:nowrap;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:.4rem;align-items:center;gap:.4rem;padding:0 .5rem 0 .35rem;line-height:1;display:inline-flex}.pg-swatch:hover{background:var(--sl-color-gray-6);color:var(--sl-color-white)}.pg-swatch-on,.pg-swatch-on:hover{border-color:var(--sl-color-accent);background:var(--sl-color-accent-low);color:var(--sl-color-white)}.pg-swatch-chip{border:1px solid var(--sl-color-gray-5);background:var(--sl-color-gray-6);border-radius:.25rem;justify-content:flex-end;align-items:flex-end;width:1.75rem;height:1.25rem;padding:.15rem;display:inline-flex}.pg-swatch-brand{background:currentColor;border-radius:50%;width:.35rem;height:.35rem}.pg-select{height:var(--pg-control-height);border:1px solid var(--sl-color-gray-5);background:var(--sl-color-black);color:var(--sl-color-gray-1);font-size:var(--sl-text-xs);cursor:pointer;border-radius:.4rem;padding:0 .5rem;line-height:1}.pg-select:hover{border-color:var(--sl-color-gray-4);color:var(--sl-color-white)}.pg-swatch:focus-visible,.pg-select:focus-visible{outline:2px solid var(--sl-color-accent-high);outline-offset:1px}.pg-inputs{flex-direction:column;gap:1.25rem;min-width:0;display:flex}.pg-editor{gap:var(--pg-head-gap);flex-direction:column;min-width:0;display:flex}.pg-editor-head{min-height:var(--pg-head-height);flex-wrap:wrap;align-content:center;align-items:baseline;gap:.5rem;display:flex}.pg-editor-label{color:var(--sl-color-white);font-weight:600}.pg-editor-hint{font-size:var(--sl-text-xs);color:var(--sl-color-gray-3)}.pg-textarea{border:1px solid var(--sl-color-gray-5);background:var(--sl-color-black);width:100%;min-height:12rem;color:var(--sl-color-white);font-family:var(--sl-font-mono,ui-monospace, monospace);font-size:var(--sl-text-sm);tab-size:2;resize:vertical;border-radius:.5rem;padding:.75rem .9rem;line-height:1.6}.pg-code{min-width:0}.pg-code .cm-editor{max-width:100%}.pg-textarea:focus-visible{outline:2px solid var(--sl-color-accent-high);outline-offset:1px}.pg-textarea-bad{border-color:var(--sl-color-red)}.pg-problems,.pg-warnings{font-size:var(--sl-text-xs);border-radius:.5rem;margin:0;padding:.6rem .9rem .6rem 2rem;line-height:1.5}.pg-problems{background:var(--sl-color-red-low);color:var(--sl-color-red-high)}.pg-warnings{background:var(--sl-color-orange-low);color:var(--sl-color-orange-high)}.pg-problems-general{margin-top:.75rem}.pg-output{gap:var(--pg-head-gap);min-width:0;top:calc(var(--sl-nav-height) + 1rem);flex-direction:column;display:flex;position:sticky}.pg-toolbar{min-height:var(--pg-head-height);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;display:flex}.pg-sizes,.pg-actions{flex-wrap:wrap;align-items:center;gap:.4rem;display:flex}.pg-size,.pg-button{height:var(--pg-control-height);border:1px solid var(--sl-color-gray-5);background:var(--sl-color-black);color:var(--sl-color-gray-1);font-size:var(--sl-text-xs);white-space:nowrap;cursor:pointer;border-radius:.4rem;justify-content:center;align-items:center;gap:.4rem;padding:0 .75rem;line-height:1;display:inline-flex}.pg-size:hover,.pg-button:hover:not(:disabled){border-color:var(--sl-color-gray-4);color:var(--sl-color-white)}.pg-size-on{border-color:var(--sl-color-accent);color:var(--sl-color-white)}.pg-size-dims{color:var(--sl-color-gray-3);font-variant-numeric:tabular-nums}.pg-button-primary{border-color:var(--sl-color-accent);background:var(--sl-color-accent);color:var(--sl-color-white)}.pg-button-primary:hover:not(:disabled){background:var(--sl-color-accent-high);border-color:var(--sl-color-accent-high)}.pg-button:disabled{opacity:.5;cursor:default}.pg-preview{border:1px solid var(--sl-color-gray-5);background-color:var(--sl-color-gray-6);background-image:linear-gradient(45deg, var(--sl-color-gray-5) 25%, transparent 25%), linear-gradient(-45deg, var(--sl-color-gray-5) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--sl-color-gray-5) 75%), linear-gradient(-45deg, transparent 75%, var(--sl-color-gray-5) 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;border-radius:.5rem;justify-content:center;align-items:center;min-height:12rem;padding:1rem;transition:opacity .15s;display:flex}.pg-preview-stale{opacity:.45}.pg-image{border-radius:.25rem;max-width:100%;height:auto;box-shadow:0 1px 12px #00000059}.pg-empty{color:var(--sl-color-gray-3);font-size:var(--sl-text-sm);margin:0}.pg-status{min-height:1.25rem;font-size:var(--sl-text-xs);margin:0}.pg-status-ok{color:var(--sl-color-green-high)}.pg-status-bad{color:var(--sl-color-red-high)}