.dp-popup.pp-popup{width:240px;border:1px solid #e5e5e5;border-radius:14px;background:#fff;color:#1e1e1e;font:11px/1.4 Inter,Arial,sans-serif;box-shadow:0 6px 18px #0003,0 1px 4px #0002;overflow:auto;max-height:calc(100vh - 16px);padding:0}.pp-popup *{box-sizing:border-box}.pp-popup button{font:inherit;color:inherit;cursor:pointer}.pp-popup button:disabled{opacity:.4;cursor:default}.pp-popup .pp-icon{width:24px;height:24px;min-width:24px;padding:4px;border:0;border-radius:6px;background:transparent;display:inline-flex;align-items:center;justify-content:center}.pp-popup .pp-icon:hover,.pp-popup .pp-icon.is-active{background:#f1f1f1}.pp-popup button:focus-visible,.pp-popup input:focus-visible,.pp-popup select:focus-visible,[data-pp-slider]:focus-visible,[data-pp-sv]:focus-visible{outline:2px solid #0d99ff;outline-offset:2px}.pp-header{height:40px;display:flex;align-items:center;gap:4px;padding:8px;border-bottom:1px solid #e5e5e5;position:sticky;top:0;z-index:4;background:white}.pp-header [role=tablist]{display:flex;align-items:center;flex:1;gap:2px}.pp-header [role=tab]{height:24px;border-radius:6px;padding:0 8px;border:0;background:none;font-size:12px;color:#888}.pp-header [role=tab][aria-selected=true]{background:#f5f5f5;color:#1e1e1e;font-weight:600}.pp-types{height:40px;padding:8px;display:flex;align-items:center;gap:4px;border-bottom:1px solid #e5e5e5}.pp-type-spacer{flex:1;min-width:0}.pp-color-body{padding:16px}.pp-sv{width:100%;aspect-ratio:1;border:1px solid #0002;border-radius:5px;position:relative;background:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,transparent),var(--hue);touch-action:none;cursor:crosshair;outline-offset:3px}.pp-sv-marker{position:absolute;width:16px;height:16px;transform:translate(-50%,-50%);border:4px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #0003,0 2px 3px #0002;pointer-events:none}.pp-color-rails{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:center;margin:12px 0 20px}.pp-color-rails>div{display:grid;gap:12px}.pp-slider{height:16px;position:relative;touch-action:none;cursor:pointer;min-width:0}.pp-rail{position:absolute;inset:0;border:1px solid #c9c9c9;border-radius:99px;background:#f5f5f5}.pp-knob{position:absolute;top:50%;transform:translate(-50%,-50%);width:18px;height:18px;border:1px solid #bdc8d5;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0002;pointer-events:none}.pp-hue .pp-rail{background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);border-color:#0002}.pp-hue .pp-knob:after{content:"";position:absolute;inset:4px;border-radius:50%;background:inherit}.pp-alpha .pp-rail{background:linear-gradient(90deg,transparent,var(--alpha-color)),repeating-conic-gradient(#ddd 0% 25%,#fff 0% 50%) 0 0/8px 8px;border-color:#0002}.pp-alpha .pp-knob:after{content:"";position:absolute;inset:4px;border:1px solid #bbb;border-radius:50%;background:#ddd}.pp-color-fields{display:flex;gap:8px;height:24px;min-width:0}.pp-popup select{appearance:auto;color:#222;background:#fff;border:1px solid #e5e5e5;border-radius:5px;font:11px Inter,Arial,sans-serif;padding:3px 7px;height:24px;max-width:100%;min-width:0}.pp-color-fields>select{width:56px;flex-shrink:0;padding-left:7px}.pp-value-group{display:flex;min-width:0;flex:1;background:#f5f5f5;border-radius:5px;overflow:hidden}.pp-value-group input{border:0;background:transparent;min-width:0;width:100%;padding:3px 7px;font:11px Inter,Arial,sans-serif;outline-offset:-2px}.pp-color-value{flex:1}.pp-value-group label{display:flex;align-items:center;width:54px;flex:none;border-left:1px solid white}.pp-value-group label input{padding:3px 0 3px 7px}.pp-value-group label span{padding:0 6px;color:#888}.pp-palette{padding:12px 16px 16px;border-top:1px solid #e5e5e5}.pp-palette>select{width:100%;margin-bottom:8px}.pp-color-grid{display:grid;grid-template-columns:repeat(9,16px);gap:8px}.pp-color-grid button,.pp-stop{position:relative;width:16px;height:16px;border:1px solid #0002;border-radius:3px;padding:0;background:repeating-conic-gradient(#ddd 0% 25%,#fff 0% 50%) 0 0/8px 8px;overflow:hidden}.pp-color-grid button:before,.pp-stop:before{content:"";position:absolute;inset:0;background:var(--paint);opacity:var(--alpha)}.pp-image-body{padding:12px 16px 16px}.pp-mode-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.pp-mode-row select{width:96px}.pp-preview{position:relative;width:100%;aspect-ratio:1;border:1px solid #737373;border-radius:5px;overflow:hidden;background:repeating-conic-gradient(#888 0% 25%,#7b7b7b 0% 50%) 0 0/26px 26px}.pp-preview-content{position:absolute;inset:0;pointer-events:none}.pp-preview-content>svg{width:100%;height:100%;display:block}.pp-preview-actions{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px}.pp-popup .pp-upload{border:0;border-radius:5px;background:#3797f5;color:white;min-height:24px;white-space:nowrap;padding:4px 12px;font-size:12px}.pp-preview.has-image .pp-preview-actions{opacity:0;align-items:flex-end;background:linear-gradient(transparent 60%,#0004)}.pp-preview.has-image:hover .pp-preview-actions,.pp-preview.has-image:focus-within .pp-preview-actions{opacity:1}.pp-preview.pp-drag-over,.pp-drag-over{outline:2px solid #0d99ff;outline-offset:2px}.pp-adjustments{margin-top:8px}.pp-adjustment{height:32px;display:grid;grid-template-columns:80px minmax(0,1fr);align-items:center;gap:8px;position:relative}.pp-adjustment>label{color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:text;padding-right:4px}.pp-adjustment-value{position:absolute;left:0;top:5px;width:76px;height:22px;padding:2px 4px;border:1px solid #ddd;border-radius:3px;background:#fff;font:11px Inter,Arial;opacity:0;pointer-events:none}.pp-adjustment:focus-within .pp-adjustment-value,.pp-adjustment>label:hover+.pp-adjustment-value,.pp-adjustment-value:hover{opacity:1;pointer-events:auto}.pp-adjustment:focus-within>label{opacity:0}.pp-adjustment .pp-knob{width:16px;height:16px}.pp-adjustment .pp-slider{height:16px}.pp-reset{border:0;background:none;color:#777!important;font-size:10px!important;padding:4px 0;width:auto}.pp-reset:hover{color:#222!important;text-decoration:underline}.pp-image-body>.pp-reset{margin-top:6px}.pp-crop-heading{display:flex;align-items:center;justify-content:space-between;margin-top:12px}.pp-popup .pp-button{border:1px solid #ddd;border-radius:5px;padding:4px 10px;background:#fff;min-height:24px}.pp-crop-heading .pp-button{background:#0d99ff;border-color:#0d99ff;color:white}.pp-transform{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}.pp-number{display:grid;gap:4px;font-size:10px;color:#888}.pp-number input,.pp-create-form input,.pp-contrast input{height:24px;min-width:0;width:100%;padding:4px 6px;border:1px solid #e5e5e5;border-radius:4px;background:#f5f5f5;color:#222;font:11px Inter,Arial}.pp-hint{font-size:10px;color:#888;line-height:1.6;margin:8px 0 0}.pp-inline-menu{padding:8px;border-bottom:1px solid #e5e5e5;display:grid;gap:2px}.pp-inline-menu button{border:0;background:none;border-radius:4px;padding:6px 8px;text-align:left;justify-content:flex-start}.pp-inline-menu button:hover{background:#f5f5f5}.pp-blend-menu{padding:12px 16px;border-bottom:1px solid #e5e5e5}.pp-blend-menu select{width:100%}.pp-gradient-settings{padding:12px 16px 0}.pp-gradient-settings>select{width:100%}.pp-stops{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}.pp-stop.selected{outline:2px solid #0d99ff;outline-offset:2px}.pp-stop-position{display:flex;align-items:center;justify-content:space-between;margin-top:8px;color:#888;font-size:10px}.pp-stop-position label{display:flex;align-items:center;gap:4px}.pp-stop-position input{width:40px;min-width:0;border:0;border-radius:3px;background:#f5f5f5;padding:4px;font:11px Inter,Arial}.pp-library{padding:12px 16px 16px;min-height:300px}.pp-library-search{display:flex;align-items:center;gap:6px;border:1px solid #e5e5e5;border-radius:5px;padding:5px 7px}.pp-library-search input{width:100%;min-width:0;border:0;outline:0;font:11px Inter,Arial;background:transparent}.pp-library>select{width:100%;margin:8px 0}.pp-library-item{width:100%;display:flex;gap:8px;align-items:center;border:0;border-radius:4px;padding:7px 4px;background:none;text-align:left;white-space:normal;justify-content:flex-start}.pp-library-item[hidden]{display:none}.pp-library-item:hover{background:#f3f7fb}.pp-library-item>span:last-child{flex:1;min-width:0;overflow-wrap:anywhere}.pp-library-item small{display:block;color:#999;font-size:9px;margin-top:2px}.pp-style-chit,.pp-variable-chit{width:20px;height:20px;flex:none;border:1px solid #0002;border-radius:3px;background:var(--paint);display:flex;align-items:center;justify-content:center}.pp-style-chit svg{color:#777;background:#fff9;border-radius:3px;width:14px;height:14px}.pp-variable-chit{border-radius:0}.pp-create-form{padding:12px 16px;display:grid;gap:8px;border-bottom:1px solid #e5e5e5}.pp-create-form label{display:grid;gap:4px}.pp-pattern{padding:16px}.pp-pattern>label{display:grid;gap:5px}.pp-contrast{padding:12px 16px;border-bottom:1px solid #e5e5e5;display:grid;gap:8px}.pp-contrast label{display:grid;gap:4px}.pp-contrast-ratio{display:flex;justify-content:space-between;align-items:baseline}.pp-contrast-ratio>span{font-size:24px}.pp-contrast-ratio b{font-size:10px}.pp-contrast-controls{display:flex;gap:6px}.pp-contrast-controls select{flex:1}.pp-contrast .pp-hint{margin:0}
.dp-popup.pp-popup{border:0;box-shadow:0 6px 18px #0003,0 1px 4px #0002,inset 0 0 0 1px #e5e5e5}.pp-sv{border:0;box-shadow:inset 0 0 0 1px #0002}.pp-hue .pp-knob,.pp-alpha .pp-knob{width:16px;height:16px}.pp-hue .pp-knob:after{background:var(--selected-hue,#f00);border:1px solid #0002;inset:3px}.pp-adjustments{position:relative}.pp-reset-adjustments{position:absolute;right:calc(100% - 80px);top:5px;z-index:2;width:20px;height:22px;border:0;border-radius:3px;background:white;opacity:0;font-size:16px!important;padding:0}.pp-adjustments:hover .pp-reset-adjustments,.pp-reset-adjustments:focus{opacity:1}
.pp-sample-overlay{position:absolute;inset:0;z-index:150;cursor:crosshair;touch-action:none}.pp-sample-tip{position:absolute;pointer-events:none;display:flex;align-items:center;gap:7px;min-width:108px;padding:7px 9px;border:1px solid #ddd;border-radius:6px;background:white;box-shadow:0 2px 10px #0002;font:11px Inter,Arial;white-space:nowrap}.pp-sample-tip span{width:20px;height:20px;border:1px solid #ddd;border-radius:3px}.pp-sample-tip code{font:11px monospace}
.pp-gradient-extra{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#888;margin-top:6px}.pp-gradient-extra label{display:flex;gap:4px;align-items:center}.pp-gradient-extra input{min-width:0;width:40px;border:0;border-radius:3px;background:#f5f5f5;padding:4px;font:11px Inter,Arial}
.pp-color-rails{margin-bottom:12px}.pp-image-body{padding-bottom:8px}
.pp-popup select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3.5 4.75 2.5 2.5 2.5-2.5' fill='none' stroke='%23222' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 6px center;padding-right:22px}
.pp-header [role=tab][aria-selected=true]{font-weight:550}.pp-types{border-left:0;border-right:0}
.pp-color-grid button{border:1px solid #dcdcdc;box-shadow:inset 0 0 0 1px #00000004;background-clip:padding-box}
.pp-color-grid button:hover{outline:2px solid #0d99ff;outline-offset:2px}.pp-color-fields>select{width:54px}
.pp-channels{display:flex;min-width:0;flex:1}.pp-channels input{width:0;flex:1;padding:3px 2px;text-align:center;font-variant-numeric:tabular-nums}.pp-channels input+input{border-left:1px solid #fff}
.pp-color-fields:has(.pp-channels){gap:6px}.pp-color-fields:has(.pp-channels) .pp-value-group label{width:40px}.pp-color-fields:has(.pp-channels) .pp-value-group label input{padding-left:4px}.pp-color-fields:has(.pp-channels) .pp-value-group label span{padding:0 4px}
.pp-gradient-settings{padding:12px 16px 0}.pp-gradient-settings .pp-mode-row{margin-bottom:12px}.pp-mode-row>div{display:flex;gap:4px}
.pp-gradient-track{position:relative;height:48px;margin:0 0 8px;touch-action:none;cursor:copy}
.pp-gradient-ramp{position:absolute;left:0;right:0;bottom:0;height:32px;border-radius:5px;background:var(--gradient),repeating-conic-gradient(#ddd 0% 25%,#fff 0% 50%) 0 0/8px 8px;box-shadow:inset 0 0 0 1px #0002;pointer-events:none}
.pp-gradient-handle{position:absolute;top:0;width:24px;height:24px;padding:5px;border:0;border-radius:6px;background:#fff;box-shadow:0 1px 5px #0003,inset 0 0 0 1px #ddd;cursor:ew-resize!important;touch-action:none;z-index:1}
.pp-gradient-handle:after{content:"";position:absolute;left:8px;bottom:-4px;width:8px;height:8px;transform:rotate(45deg);background:inherit;box-shadow:1px 1px 1px #0002;z-index:-1}
.pp-gradient-handle.selected{background:#0d99ff;box-shadow:0 1px 5px #0003;z-index:2}
.pp-gradient-handle>span,.pp-stop-color>span{display:block;width:100%;height:100%;border-radius:3px;background:repeating-conic-gradient(#ddd 0% 25%,#fff 0% 50%) 0 0/6px 6px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #0001;pointer-events:none}
.pp-gradient-handle>span:after,.pp-stop-color>span:after{content:"";position:absolute;inset:0;background:var(--paint);opacity:var(--alpha,1)}
.pp-stops-heading{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 8px 0 16px}.pp-stops-heading strong{font-size:12px;font-weight:550}
.pp-stop-list{padding-bottom:12px}.pp-stop-row{display:grid;grid-template-columns:48px minmax(0,1fr) 24px;gap:8px;align-items:center;height:32px;padding:4px 8px 4px 16px}.pp-stop-row.selected{background:#e5f4ff}
.pp-stop-offset,.pp-stop-values{height:24px;display:flex;align-items:center;background:#f5f5f5;border-radius:5px;min-width:0;overflow:hidden}
.pp-stop-row input{min-width:0;width:100%;height:24px;background:transparent;border:0;font:11px Inter,Arial;padding:0 4px;color:#222;font-variant-numeric:tabular-nums}
.pp-stop-offset input{padding:0 0 0 8px}.pp-stop-offset>span{padding-right:6px;font-size:11px;color:#777}
.pp-stop-values{gap:0;padding-left:4px}.pp-popup .pp-stop-color{border:0;padding:0;width:16px;height:16px;min-width:16px;background:none;border-radius:3px}
.pp-stop-values>input{flex:1;padding:0 4px}.pp-stop-values>label{display:flex;align-items:center;width:46px;min-width:46px;border-left:1px solid white}.pp-stop-values>label input{padding-right:0}.pp-stop-values>label>span{padding-right:4px;color:#888}
.pp-stop-offset:focus-within,.pp-stop-values:focus-within{box-shadow:inset 0 0 0 1px #0d99ff}.pp-stop-values.is-bound{padding-right:0;box-shadow:inset 0 0 0 1px #dcdcdc}.pp-stop-variable{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;padding:0 4px;background:none;border:0}
.pp-gradient-advanced{border-top:1px solid #eee;padding:8px 16px;color:#888;font-size:10px}.pp-gradient-advanced summary{cursor:pointer;list-style:none}.pp-gradient-advanced summary:after{content:"⌄";float:right}.pp-gradient-advanced[open] summary:after{content:"⌃"}.pp-gradient-extra{margin-top:8px;gap:8px}.pp-gradient-extra .pp-reset{text-align:right;max-width:100px;font-size:9px!important}
.pp-stop-editor{position:fixed;width:240px;max-height:calc(100vh - 16px);overflow:auto;background:#fff;border-radius:14px;box-shadow:0 6px 18px #0003,0 1px 4px #0002,inset 0 0 0 1px #e5e5e5;z-index:101;font:11px/1.4 Inter,Arial,sans-serif;color:#1e1e1e}
.pp-stop-editor .pp-header{border-radius:14px 14px 0 0}.pp-stop-editor .pp-color-fields>select{width:54px}.pp-stop-editor .pp-library{min-height:260px}

.pp-stop-offset input{width:32px;flex:1;text-align:right;padding:0 2px 0 0}.pp-gradient-handle>span{box-shadow:inset 0 0 0 1px #ffffff80}.pp-gradient-handle>span:after{box-shadow:inset 0 0 0 1px #00000012}
.pp-popup .pp-gradient-handle.selected:focus-visible{outline:0;box-shadow:0 1px 5px #0003}