.pg-page{width:100%;max-width:1280px;margin:0 auto;padding:40px 40px 80px;display:flex;flex-direction:column;gap:18px}.pg{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;margin-top:10px}.pg-picker{flex:1 1 180px;max-width:220px;position:-webkit-sticky;position:sticky;top:20px}.pg-picker ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}.pg-picker button{all:unset;box-sizing:border-box;display:inline-block;padding:7px 10px;min-height:36px;cursor:pointer;border-radius:3px 8px 4px 9px;font-style:italic;font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--site-text)}.pg-picker button:hover{color:var(--plop-ink-text);background:linear-gradient(transparent 18%,color-mix(in srgb,var(--plop-mustard) 55%,transparent) 18% 88%,transparent 88%)}.pg-picker button[aria-pressed=true]{color:var(--plop-ink-text);background:linear-gradient(transparent 18%,var(--plop-mustard) 18% 88%,transparent 88%);transform:rotate(-1.5deg)}.pg-picker button:focus-visible{outline:2.5px dashed var(--plop-focus);outline-offset:2px}.pg-main{flex:999 1 600px;min-width:0;display:flex;flex-direction:column;gap:24px}.pg-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 30px}.pg-toolbar legend{margin-bottom:8px}.pg-stage{display:flex;align-items:center;justify-content:center;min-height:320px;padding:80px 30px 50px;border:2.5px solid var(--plop-ink);border-radius:14px 18px 11px 20px/18px 12px 20px 14px;box-shadow:7px 9px 0 var(--plop-shadow)}@media (min-width:861px) and (min-height:700px){.pg-preview{position:-webkit-sticky;position:sticky;top:8px;z-index:3}}.pg-radius{width:180px}.pg-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));grid-gap:24px;gap:24px;align-items:start}.pg-code,.pg-controls{background:var(--plop-sheet);border:2.5px solid var(--plop-ink);border-radius:14px 10px 16px 11px;box-shadow:5px 7px 0 var(--plop-shadow);padding:18px 20px 22px;display:flex;flex-direction:column;gap:16px}.pg-h{margin:0;font-style:italic;font-weight:900;font-size:22px;text-transform:uppercase;color:var(--site-ink)}.pg-controls__list{display:flex;flex-direction:column;gap:18px}.pg-control{padding-bottom:16px;border-bottom:2px dashed rgba(40,72,216,.2)}.pg-range,.pg-select{display:flex;flex-direction:column;gap:8px}.pg-range>span,.pg-select>span{font-style:italic;font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--plop-ink)}.pg-range output{font-family:var(--plop-font-mono);font-style:normal;color:var(--plop-ink-soft);margin-left:6px}.pg-range input{accent-color:var(--plop-ink);width:100%}input[type=range]{-moz-appearance:none;appearance:none;-webkit-appearance:none;height:24px;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:4px;background:color-mix(in srgb,var(--plop-ink) 22%,var(--plop-paper))}input[type=range]::-moz-range-track{height:6px;border-radius:4px;background:color-mix(in srgb,var(--plop-ink) 22%,var(--plop-paper))}input[type=range]::-moz-range-progress{height:6px;border-radius:4px;background:var(--plop-ink)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;box-sizing:border-box;width:20px;height:20px;margin-top:-7px;border-radius:50%;border:3px solid var(--plop-paper);background:var(--plop-ink);box-shadow:0 0 0 1.5px var(--plop-ink)}input[type=range]::-moz-range-thumb{box-sizing:border-box;width:20px;height:20px;border-radius:50%;border:3px solid var(--plop-paper);background:var(--plop-ink);box-shadow:0 0 0 1.5px var(--plop-ink)}.pg-range input:focus-visible,.pg-select select:focus-visible{outline:2.5px dashed var(--plop-focus);outline-offset:4px}.pg-code__bar{display:flex;align-items:center;justify-content:space-between;gap:12px}.pg-code pre{margin:0;padding:16px 18px;overflow-x:auto;background:var(--plop-paper);border:2px dashed rgba(40,72,216,.35);border-radius:10px;font-family:var(--plop-font-mono);font-size:14px;line-height:1.7;color:var(--plop-ink-text);white-space:pre}.pg-code pre:focus-visible{outline:2.5px dashed var(--plop-focus);outline-offset:3px}@media (max-width:860px){.pg-page{padding:24px 18px 60px}.pg-picker{position:static;max-width:none;flex-basis:100%}.pg-picker ul{flex-direction:row;flex-wrap:wrap}}