.param-playground{--pp-accent: hsl(217, 91%, 60%);--pp-chip-bg: var(--sl-color-bg-sidebar);--pp-track-bg: color-mix(in srgb, var(--sl-color-text) 20%, transparent);--pp-track-border: color-mix(in srgb, var(--sl-color-text) 28%, transparent);position:relative;margin:1.5rem 0;background:var(--sl-color-bg-sidebar);border:1px solid var(--sl-color-gray-5);border-radius:12px;padding:16px 18px 18px}.param-playground .pp-caption{font:600 12px ui-sans-serif,system-ui,sans-serif;color:var(--sl-color-gray-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}.param-playground .pp-grid{display:grid;grid-template-columns:minmax(200px,280px) 1fr;gap:18px;align-items:start}@media(max-width:640px){.param-playground .pp-grid{grid-template-columns:1fr}}.param-playground .pp-controls{display:flex;flex-direction:column;gap:12px;min-width:0}.param-playground .pp-preview-col{display:flex;flex-direction:column;gap:10px;min-width:0}.param-playground .pp-preview-wrap{position:relative;min-height:120px;padding:16px;background:var(--sl-color-bg);border:1px solid var(--sl-color-hairline);border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden}.param-playground .pp-readouts{display:flex;flex-wrap:wrap;gap:8px}.param-playground .pp-readouts:empty{display:none}.param-playground .pp-param{display:flex;flex-direction:column;gap:6px}.param-playground .pp-param-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}.param-playground .pp-param-label{font:600 12px ui-sans-serif,system-ui,sans-serif;color:var(--sl-color-text);line-height:1.2}.param-playground .pp-param-value{font:600 11.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--sl-color-gray-3);letter-spacing:.02em}.param-playground .pp-slider{appearance:none;-webkit-appearance:none;width:100%;height:16px;background:transparent;outline:none;margin:0;cursor:pointer;display:block}.param-playground .pp-slider::-webkit-slider-runnable-track{height:4px;background:var(--pp-track-bg);border-radius:2px}.param-playground .pp-slider::-moz-range-track{height:4px;background:var(--pp-track-bg);border-radius:2px}.param-playground .pp-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;background:var(--pp-accent);border:2px solid var(--sl-color-bg-sidebar);border-radius:50%;margin-top:-6px;box-shadow:0 1px 2px #0003}.param-playground .pp-slider::-moz-range-thumb{width:16px;height:16px;background:var(--pp-accent);border:2px solid var(--sl-color-bg-sidebar);border-radius:50%;box-shadow:0 1px 2px #0003}.param-playground .pp-slider:focus-visible::-webkit-slider-thumb{outline:2px solid var(--pp-accent);outline-offset:2px}.param-playground .pp-select{font:500 12.5px ui-sans-serif,system-ui,sans-serif;color:var(--sl-color-text);background:var(--sl-color-bg);border:1px solid var(--sl-color-hairline);border-radius:6px;padding:6px 10px;cursor:pointer;width:100%}.param-playground .pp-select:focus-visible{outline:2px solid var(--pp-accent);outline-offset:1px;border-color:var(--pp-accent)}.param-playground .pp-toggle{position:relative;width:34px;height:20px;display:inline-block;flex:0 0 auto}.param-playground .pp-toggle input{appearance:none;-webkit-appearance:none;position:absolute;inset:0;margin:0;width:100%;height:100%;background:var(--pp-track-bg);border:1px solid var(--pp-track-border);border-radius:999px;cursor:pointer;transition:background-color .14s,border-color .14s}.param-playground .pp-toggle input:before{content:"";position:absolute;top:1px;left:1px;width:16px;height:16px;background:color-mix(in srgb,var(--sl-color-text) 55%,var(--sl-color-bg));border-radius:50%;box-shadow:0 1px 2px #0000002e;transition:transform .14s,background-color .14s}.param-playground .pp-toggle input:checked{background:var(--pp-accent);border-color:var(--pp-accent)}.param-playground .pp-toggle input:checked:before{background:#fff;transform:translate(14px)}.param-playground .pp-toggle input:focus-visible{outline:2px solid var(--pp-accent);outline-offset:2px}.param-playground .pp-color{width:100%;height:28px;padding:0;border:1px solid var(--sl-color-hairline);border-radius:6px;background:var(--sl-color-bg);cursor:pointer}.param-playground .pp-color:focus-visible{outline:2px solid var(--pp-accent);outline-offset:1px;border-color:var(--pp-accent)}.param-playground .pp-color::-webkit-color-swatch-wrapper{padding:3px}.param-playground .pp-color::-webkit-color-swatch{border:1px solid var(--sl-color-hairline);border-radius:4px}.param-playground .pp-readout{display:inline-flex;gap:8px;align-items:baseline;background:var(--pp-chip-bg);border:1px solid var(--sl-color-hairline);border-radius:999px;padding:4px 12px}.param-playground .pp-readout-label{font:600 11px ui-sans-serif,system-ui,sans-serif;color:var(--sl-color-gray-3);text-transform:uppercase;letter-spacing:.05em}.param-playground .pp-readout-value{font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--sl-color-text)}.param-playground .pp-readout-value[data-pp-readout-error]:before{content:"⚠ ";color:#dd3c3c}.param-playground .pp-preview-wrap>.pp-preview{width:100%;display:flex;align-items:center;justify-content:center}