.paint-workshop{--workshop-bg:#302838;--workshop-panel:#665572;--workshop-secondary:#ad705c;--workshop-accent:#f1bb98;--workshop-paint:#bca8d1;position:relative;isolation:isolate;height:clamp(710px,85svh,900px);overflow:hidden;background:var(--workshop-bg);color:#fff5e8;border-bottom:1px solid #ffffff24;transition:background-color .4s}
.paint-workshop[data-palette=olive]{--workshop-bg:#25382e;--workshop-panel:#647459;--workshop-secondary:#a58d65;--workshop-accent:#e7d0a6;--workshop-paint:#a5b790}
.paint-workshop[data-palette=coast]{--workshop-bg:#203344;--workshop-panel:#4f7184;--workshop-secondary:#b76554;--workshop-accent:#ffba9e;--workshop-paint:#91bdcc}
.workshop-set{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.workshop-set::after{content:'';position:absolute;left:20%;right:13%;bottom:17%;height:12%;border-radius:50%;background:#00000032;filter:blur(28px)}
.workshop-panel{position:absolute;display:block;transition:background-color .4s}
.workshop-panel-left{left:14%;top:31%;width:22%;height:43%;background:var(--workshop-secondary);border-radius:48% 48% 5px 5px;transform:rotate(-13deg)}
.workshop-panel-center{left:36%;top:17%;width:32%;height:65%;background:var(--workshop-panel);border-radius:48% 48% 5px 5px;transform:rotate(7deg);box-shadow:16px 24px 48px #0000001c}
.workshop-panel-right{left:70%;top:24%;width:16%;height:52%;background:var(--workshop-secondary);border-radius:5px 50% 50% 5px;transform:rotate(11deg)}
.workshop-orbit{position:absolute;left:7%;top:24%;width:81%;height:57%;border:1px solid #ffffff26;border-radius:50%;transform:rotate(-13deg)}
.workshop-heading{position:absolute;top:38px;left:var(--gutter);right:var(--gutter);z-index:3;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;pointer-events:none}
.workshop-heading h2{font-size:clamp(34px,3.4vw,58px);line-height:1.08;letter-spacing:-.055em;max-width:520px;text-shadow:0 2px 24px #00000020}
.workshop-heading h2 span{color:var(--workshop-accent);transition:color .4s}



#workshop-canvas{position:absolute;inset:115px 0 118px;width:100%;height:calc(100% - 233px);z-index:1;display:block;pointer-events:none;opacity:0}
.paint-workshop[data-ready=true] #workshop-canvas{opacity:1}
.workshop-footer{position:absolute;left:var(--gutter);right:var(--gutter);bottom:32px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:24px}
.workshop-catalog{display:flex;align-items:center;gap:26px;min-height:48px;font-size:17px;font-weight:750;border-bottom:1px solid #ffffff70;white-space:nowrap}
.workshop-catalog:hover{color:var(--workshop-accent)}
.workshop-catalog svg{width:20px;height:20px}
.workshop-palettes{display:flex;gap:10px}
.workshop-palettes button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:9px 15px;border:1px solid #ffffff40;border-radius:14px;background:#17151b40;color:#fff5e8;font-size:15px;line-height:1.4;font-weight:700;transition:background .2s,border-color .2s}
.workshop-palettes button:hover{background:#ffffff15;border-color:#ffffff90}
.workshop-palettes button[aria-pressed=true]{background:#fff5e8;color:#302838;border-color:#fff5e8;box-shadow:0 4px 16px #00000010}
.workshop-swatch{display:flex;flex-shrink:0;isolation:isolate}
.workshop-swatch i{display:block;width:22px;height:22px;border-radius:50%;background:#bca8d1;box-shadow:0 0 0 1px #00000014}
.workshop-swatch i+i{margin-left:-7px;background:#f1bb98}
[data-workshop-palette=olive] .workshop-swatch i{background:#a5b790}
[data-workshop-palette=olive] .workshop-swatch i+i{background:#e7d0a6}
[data-workshop-palette=coast] .workshop-swatch i{background:#91bdcc}
[data-workshop-palette=coast] .workshop-swatch i+i{background:#ffba9e}
.paint-workshop :is(button,a):focus-visible{outline:3px solid var(--workshop-accent);outline-offset:5px}
.workshop-fallback{position:absolute;inset:160px 12% 135px;display:flex;align-items:center;justify-content:center;gap:7%;pointer-events:none}
.workshop-fallback>img{width:35%;height:100%;object-fit:contain;order:1;transform:rotate(-9deg);filter:drop-shadow(12px 18px 14px #00000030)}
.workshop-fallback>svg{width:16%;height:65%;stroke:none;fill:none;overflow:visible;filter:drop-shadow(6px 10px 9px #00000030)}
.workshop-fallback>.fallback-brush{transform:rotate(25deg);order:0}
.workshop-fallback>.fallback-roller{transform:rotate(-17deg);order:2}
.workshop-fallback [fill="#e87854"]{fill:var(--workshop-accent)}
.workshop-fallback [fill="#314cf5"],.workshop-fallback [fill="#f9f7ed"]{fill:var(--workshop-paint)}
.workshop-fallback [stroke="#314cf5"]{stroke:var(--workshop-paint)}
.paint-workshop[data-ready=true] .workshop-fallback{display:none}
@media(max-width:1100px){.workshop-footer{flex-direction:column-reverse;gap:14px;bottom:24px}.workshop-panel-left{left:8%;width:25%}.workshop-panel-center{left:32%;width:37%}.workshop-panel-right{left:73%;width:19%}#workshop-canvas{bottom:170px;height:calc(100% - 285px)}.workshop-fallback{bottom:200px}}
@media(max-width:760px){.paint-workshop{height:740px}.workshop-heading{top:28px}.workshop-heading h2{font-size:34px;max-width:290px}#workshop-canvas{top:145px;height:calc(100% - 320px)}.workshop-panel-left{left:-5%;top:31%;width:33%;height:36%}.workshop-panel-center{left:25%;top:23%;width:51%;height:45%}.workshop-panel-right{left:80%;top:29%;width:32%;height:39%}.workshop-orbit{left:-15%;top:26%;width:123%;height:43%}.workshop-set::after{bottom:29%}.workshop-catalog{font-size:16px;min-height:44px}.workshop-palettes{width:100%;gap:8px}.workshop-palettes button{flex:1;flex-direction:column;gap:8px;min-width:0;padding:12px 8px;font-size:14px}.workshop-fallback{inset:185px 5% 215px}}
@media(max-width:440px){.workshop-heading{gap:12px}.workshop-heading h2{font-size:31px;max-width:290px}.workshop-fallback>img{width:45%}.workshop-fallback>svg{width:18%}.workshop-fallback{gap:2%;inset:195px 4% 215px}.workshop-palettes button{font-size:13px;padding-inline:5px}.workshop-swatch i{width:24px;height:24px}}
@media(max-width:350px){.workshop-heading h2{font-size:27px}.workshop-heading{gap:8px}.workshop-palettes{gap:6px}.workshop-palettes button{font-size:12px;line-height:1.6}}
@media(prefers-reduced-motion:reduce){.paint-workshop,.workshop-panel,.workshop-heading h2 span,.workshop-palettes button{transition:none}}