#morePaint {
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;position:relative;
 min-width:0;min-height:44px;background:#f8e8c9;border:1px solid #dabc8e;border-radius:10px;padding:2px;
 font:750 10px/1.05 system-ui;color:#254842;cursor:pointer
}
#editor #colors #morePaint img {width:30px;height:27px;object-fit:contain}
#morePaint.custom-active {border:2px solid #245c57;background:white}
#morePaint.custom-active::after {content:"";position:absolute;right:1px;top:1px;width:13px;height:13px;border-radius:100%;border:1px solid #65584a;background:var(--picked)}
@container studio (max-aspect-ratio:1/1) {
 #editor #colors {grid-template-columns:repeat(8,minmax(0,1fr)) minmax(48px,.95fr)}
}
@container studio (max-width:425px) and (max-aspect-ratio:1/1) {
 #editor #colors {grid-template-columns:repeat(4,minmax(0,1fr)) 52px}
 #morePaint {grid-column:5;grid-row:1/3}
 #editor #colors #morePaint img {width:38px;height:36px}
}
@container studio (min-aspect-ratio:1/1) and (max-height:460px) {
 #morePaint {grid-column:1/-1;flex-direction:row;gap:3px}
}
#paintPicker {width:min(94vw,460px);max-width:none;max-height:92dvh;overflow:auto;margin:auto;padding:16px;
 border:2px solid #e6ae63;border-radius:23px;color:#23443d;background:#fff9ea;box-shadow:0 14px 45px #40281240}
#paintPicker::backdrop {background:#3427158c}
.paint-heading {display:flex;align-items:center;gap:10px}
.paint-heading img {width:42px;height:42px;object-fit:contain}
#paintPicker h2 {margin:0;flex:1;font:800 24px/1.1 system-ui;letter-spacing:-.04em;color:#254943}
.paint-heading form {margin:0}
.paint-heading button {width:44px;height:44px;border:0;border-radius:50%;background:#f5e9cc;color:#355952;font-size:24px;padding:0}
#paintPicker h3 {margin:10px 0 3px;font:750 14px system-ui;color:#3b554d}
.paint-grid {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px}
.paint-option {position:relative;display:grid;place-items:center;min-width:0;height:44px;padding:2px;border:2px solid transparent;border-radius:12px;background:transparent;cursor:pointer}
.paint-option::before {content:"";width:min(34px,100%);aspect-ratio:1;border-radius:50%;border:1px solid #0002;background:radial-gradient(ellipse at 35% 20%,#fff3,transparent 65%),var(--paint);box-shadow:inset 0 -2px 2px #0002,0 1px 1px #43312026}
.paint-option[aria-pressed=true] {border-color:#245c57;background:white}
.paint-option[aria-pressed=true]::after {content:"✓";position:absolute;bottom:-1px;right:-1px;background:#245c57;color:white;border-radius:50%;font:700 10px/15px system-ui;width:15px}
.paint-mix {display:flex;align-items:center;gap:8px;padding-top:10px;margin-top:9px;border-top:1px solid #e2cfa8}
.paint-mix label {position:relative;display:flex;align-items:center;gap:8px;min-height:44px;flex:1;font:750 14px system-ui;cursor:pointer}
#paintSample {width:37px;height:37px;border-radius:11px;border:2px solid white;box-shadow:0 0 0 1px #b9aa8d}
#customPaint {position:absolute;inset:0;width:100%;height:100%;cursor:pointer;opacity:0}
.paint-mix label:focus-within {outline:2px solid #245c57}
#usePaint {min-height:44px;border:0;padding:6px 13px;border-radius:12px;color:white;background:#245c57;font-weight:750}
@media (max-height:480px) and (orientation:landscape){
 #paintPicker {width:min(90vw,620px);padding:9px 14px}
 #paintPicker .paint-grid {grid-template-columns:repeat(12,minmax(0,1fr))}
 .paint-mix {margin-top:3px;padding-top:3px}
}
@media print {#paintPicker {display:none!important}}
@media screen and (max-width:900px) and (orientation:portrait) {
 body.painting:has(#editor.wide-sheet) #paintPicker[open] {
  position:fixed;inset:50% auto auto 50%;margin:0;transform:translate(-50%,-50%) rotate(90deg);
  width:min(90dvh,620px);max-height:90dvw;padding:9px 14px;
 }
 body.painting:has(#editor.wide-sheet) #paintPicker .paint-grid {grid-template-columns:repeat(12,minmax(0,1fr))}
}