.control-lava-surface{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;border-radius:inherit}
#services #website-lab .lab-description{isolation:isolate;background:linear-gradient(110deg,#0a151c,#10191d);border-bottom:1px solid #d66b263d;box-shadow:inset 0 1px #ffba6f19}
#services #website-lab .lab-description>*:not(canvas){position:relative;z-index:1}
#services #website-lab .lab-description .color-picker-wrap{z-index:30}
#services .lab-description .lab-controls{background:#07111780;border:1px solid #c5a47d22;padding:12px 14px;border-radius:6px;justify-self:start;backdrop-filter:blur(8px)}
.color-picker-wrap{position:relative}.color-picker-toggle{display:flex;align-items:center;gap:10px;padding:10px 14px;min-width:160px;background:linear-gradient(#26343c,#121f27);border:1px solid #bfa17b66;border-radius:5px;color:#e7e2d8;font:11px Foundry,sans-serif;cursor:pointer}.color-picker-toggle i{width:20px;height:20px;border:1px solid #ffffff66;border-radius:50%;background:var(--lab-accent);box-shadow:0 0 14px color-mix(in srgb,var(--lab-accent) 30%,transparent)}.color-picker-toggle b{font-weight:500;letter-spacing:.06em}.color-picker-toggle span:last-child{margin-left:auto;color:#b9b6a7}
.color-picker-popover{position:absolute;right:0;top:calc(100% + 12px);width:310px;max-width:calc(100vw - 65px);padding:20px;background:linear-gradient(145deg,#20303a,#09151e);border:1px solid #dcb17977;box-shadow:0 22px 70px #000d,inset 0 1px #fff2;border-radius:12px;z-index:50;box-sizing:border-box}.color-picker-popover[hidden]{display:none}.picker-heading{display:flex;justify-content:space-between;align-items:center;color:#e8d7bf;font-size:11px;margin-bottom:14px}.picker-close{background:none;border:0;color:#c9c9bb;font-size:20px;padding:0 3px;cursor:pointer}.picker-wheel{position:relative;width:208px;height:208px;border-radius:50%;margin:0 auto 17px;touch-action:none;cursor:crosshair;outline-offset:5px;box-shadow:0 0 0 5px #070e1544,0 6px 20px #0006}.picker-wheel canvas{width:100%;height:100%;border-radius:50%;display:block}.picker-point{position:absolute;width:13px;height:13px;border:2px solid white;border-radius:50%;box-shadow:0 1px 5px #000;transform:translate(-50%,-50%);pointer-events:none}
.picker-label{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.09em;color:#c3b5a0;margin:0 0 9px}.picker-lightness{width:100%;height:13px;border-radius:10px;appearance:none;-webkit-appearance:none;cursor:pointer;margin:0 0 17px;border:1px solid #fff3}.picker-lightness::-webkit-slider-thumb{appearance:none;width:17px;height:17px;border:2px solid #fff;background:transparent;box-shadow:0 1px 5px #000;border-radius:50%}.picker-swatches{display:grid;grid-template-columns:repeat(9,1fr);gap:7px;margin-bottom:16px}.picker-swatches button{padding:0;width:100%;aspect-ratio:1;border:1px solid #ffffff44;border-radius:4px;background:var(--swatch);cursor:pointer}.picker-swatches button:hover{outline:2px solid #fff;outline-offset:2px}.picker-hex{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #fff2;padding-top:12px}.picker-hex label{font-size:9px;letter-spacing:.1em;color:#b8aca0}.picker-hex input{width:100px;padding:8px;background:#07131b;border:1px solid #bda27b55;border-radius:4px;font:11px Foundry,sans-serif;color:#eee3cf;text-transform:uppercase}.picker-hint{font-size:8px!important;color:#8b9da5!important;margin:10px 0 0!important;line-height:1.6!important}
@media(max-width:700px){.color-picker-popover{left:0;right:auto}.color-picker-toggle{min-width:180px}}
#services #website-lab .lab-description>.lab-controls:has(.color-picker-wrap){z-index:40}