@layer base,patterns;@layer components{.p-gradient{--_checker-a:#fff;--_checker-b:#dde3ec;--_checker:repeating-conic-gradient(var(--_checker-b) 0 25%, var(--_checker-a) 0 50%) 0 0 / 16px 16px;grid-template-areas:"stage""editor""output"}.theme-dark .p-gradient{--_checker-a:#1a2333;--_checker-b:#2a3549}.p-gradient__stage{grid-area:stage}.p-gradient__editor{grid-area:editor;container:gradient-editor/inline-size}.p-gradient__output{grid-area:output}.p-gradient__stage,.p-gradient__editor,.p-gradient__output{align-content:start;gap:var(--site-space-intro);min-width:0;display:grid}@media (min-width:960px){.p-gradient{column-gap:var(--site-content-gap);grid-template-rows:auto 1fr;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"editor stage""editor output"}}.p-gradient__group{align-content:start;gap:.75rem;min-width:0;display:grid}.p-gradient__group[hidden],.p-gradient__center[hidden]{display:none}.p-gradient__pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.p-gradient input[type=range]{width:100%;min-height:44px;accent-color:var(--tool-accent);cursor:pointer;margin:0}.p-gradient__range{grid-template-columns:6rem minmax(0,1fr);align-items:center;gap:1rem;display:grid}.p-gradient__toggles,.p-gradient__chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;display:grid}.p-gradient__toggles--three{grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.p-gradient__chips{grid-template-columns:repeat(4,minmax(0,1fr))}@container gradient-editor (width>=28rem){.p-gradient__chips{grid-template-columns:repeat(8,minmax(0,1fr))}}.p-gradient__chip{min-width:0;min-height:44px;color:var(--tool-text);background:var(--tool-surface);border:1px solid var(--tool-border);font:600 .8125rem/1.4 var(--tool-mono);cursor:pointer;transition:color .18s var(--ease-out), border-color .18s var(--ease-out);border-radius:0;padding:.5rem .25rem}.p-gradient__chip:hover{color:var(--tool-accent);border-color:var(--tool-accent)}.p-gradient__chip[aria-pressed=true]{color:var(--tool-accent);border-color:var(--tool-accent);background:var(--tool-input);box-shadow:inset 0 -2px var(--tool-accent)}.p-gradient :is(.p-gradient__chip,.p-gradient__preset):focus-visible{outline:2px solid var(--tool-accent);outline-offset:2px}.p-gradient__preview{aspect-ratio:4/3;background:var(--_checker);border:1px solid var(--tool-border);position:relative;overflow:hidden}@media (min-width:600px){.p-gradient__preview{aspect-ratio:16/10}}.p-gradient__preview-fill{position:absolute;inset:0}.p-gradient__center{top:var(--center-y,50%);left:var(--center-x,50%);cursor:grab;touch-action:none;background:0 0;border:0;justify-content:center;align-items:center;width:44px;height:44px;padding:0;display:flex;position:absolute;translate:-50% -50%}.p-gradient__center:active{cursor:grabbing}.p-gradient__center-mark{border:3px solid #fff;width:20px;height:20px;box-shadow:0 0 0 1px #000000b3,inset 0 0 0 1px #000000b3}.p-gradient__center:focus-visible{outline-offset:0;outline:2px solid #fff;box-shadow:0 0 0 4px #0d2e5b}.p-gradient__presets{grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;display:grid}.p-gradient__preset{min-width:0;color:var(--tool-text);background:var(--tool-surface);border:1px solid var(--tool-border);font:.75rem/1.4 var(--tool-mono);text-align:start;cursor:pointer;border-radius:0;gap:.5rem;padding:.5rem;display:grid}.p-gradient__preset:hover{color:var(--tool-accent);border-color:var(--tool-accent)}.p-gradient__preset-swatch{background:var(--_checker);border:1px solid var(--tool-border);height:2.5rem;display:block;position:relative}.p-gradient__preset-fill{position:absolute;inset:0}.p-gradient__preset-name{overflow-wrap:anywhere}.p-gradient__track{padding-inline:1.5rem;display:grid}.p-gradient__bar{background:var(--_checker);border:1px solid var(--tool-border);cursor:copy;height:40px;position:relative}.p-gradient__bar-fill{position:absolute;inset:0}.p-gradient__handles{height:44px;position:relative}.p-gradient__handle{top:0;left:var(--stop-position,0%);cursor:grab;touch-action:none;justify-content:center;align-items:flex-end;width:44px;height:44px;padding-bottom:4px;display:flex;position:absolute;translate:-50%}.p-gradient__handle:active{cursor:grabbing}.p-gradient__handle:before{content:"";background:var(--tool-text);width:2px;height:18px;position:absolute;top:0;left:calc(50% - 1px)}.p-gradient__handle-mark{background:linear-gradient(var(--stop-color), var(--stop-color)), var(--_checker);border:2px solid var(--tool-surface);outline:1px solid var(--tool-text);width:22px;height:22px}.p-gradient__handle[data-selected]{z-index:1}.p-gradient__handle[data-selected] .p-gradient__handle-mark{outline:2px solid var(--tool-accent)}.p-gradient__handle[data-selected]:before{background:var(--tool-accent)}.p-gradient__handle:focus-visible{outline:2px solid var(--tool-accent);outline-offset:-2px}.p-gradient__stops{gap:.75rem;margin:0;padding:0;list-style:none;display:grid;container-type:inline-size}.p-gradient__stop{background:var(--tool-surface);border:1px solid var(--tool-border);box-shadow:inset 4px 0 var(--stop-color,transparent);padding:.75rem}.p-gradient__stop[data-selected]{border-color:var(--tool-accent)}.p-gradient__stop-fields{grid-template-columns:3.5rem minmax(0,1fr) minmax(0,1fr) 44px;grid-template-areas:"legend legend legend legend""picker hex hex remove""position position alpha alpha";align-items:end;gap:.5rem .75rem;padding-left:.5rem;display:grid}@container (width>=34rem){.p-gradient__stop-fields{grid-template-columns:3.5rem minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) 44px;grid-template-areas:"legend legend legend legend legend""picker hex position alpha remove"}}.p-gradient__stop-legend{color:var(--tool-accent);font:600 .75rem/1.5 var(--tool-mono);letter-spacing:.05em;grid-area:legend}.p-gradient .p-gradient__stop input[type=color]{height:var(--site-control-height);min-height:var(--site-control-height);grid-area:picker}.p-gradient__stop-field{gap:.25rem;min-width:0;display:grid}.p-gradient__stop-field--hex{grid-area:hex}.p-gradient__stop-field--position{grid-area:position}.p-gradient__stop-field--alpha{grid-area:alpha}.p-gradient__stop-label{color:var(--tool-muted);font:.75rem/1.5 var(--tool-mono);letter-spacing:.05em}.p-gradient__stop-remove{width:44px;height:var(--site-control-height);color:var(--tool-muted);border:1px solid var(--tool-border);cursor:pointer;background:0 0;border-radius:0;grid-area:remove;place-items:center;padding:0;font-size:1.5rem;line-height:1;display:grid}.p-gradient__stop-remove:hover{color:var(--tool-error);border-color:var(--tool-error)}.p-gradient__stop-remove .icon{width:18px;height:18px}.p-gradient__stop-remove:focus-visible{outline:2px solid var(--tool-accent);outline-offset:2px}.p-gradient__stop-remove:disabled{opacity:.4;cursor:default;pointer-events:none}.p-gradient .p-gradient__code{word-break:break-all;height:10rem}@media not (min-width:600px){.p-gradient__range{grid-template-columns:5rem minmax(0,1fr)}.p-gradient__toggles--three{gap:.5rem}}}@layer utilities;