.vplm-root{box-sizing:border-box;max-width:560px;margin:1.5em auto;padding:22px;border:1px solid currentColor;border-color:color-mix(in srgb,currentColor 20%,transparent);border-radius:12px;color:inherit;font-family:inherit}
.vplm-root *{box-sizing:border-box}
.vplm-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.vplm-title{font-weight:650;font-size:1rem}
.vplm-reset{border:1px solid currentColor!important;border-radius:6px;background:transparent!important;color:inherit!important;padding:6px 10px;cursor:pointer;font-size:.8rem;line-height:1.4}
.vplm-wheel{width:min(280px,100%);height:auto;display:block;margin:0 auto;overflow:visible}
.vplm-segment{cursor:pointer;outline:none}
.vplm-segment:focus-visible{filter:brightness(1.15)}
.vplm-controls{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:18px}
.vplm-control-title{display:flex;align-items:center;gap:8px;min-height:34px;font-weight:600;font-size:.88rem}
.vplm-swatch{width:23px;height:23px;flex:none;border-radius:5px;border:1px solid #8888}
.vplm-slider{display:block;width:100%;height:10px;appearance:none;-webkit-appearance:none;border-radius:99px;background:linear-gradient(to right,#000,var(--vplm-mid,#888) 50%,#fff);border:1px solid #888;cursor:pointer;margin:15px 0 6px;padding:0!important}
.vplm-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#f4f4f4;border:3px solid #333;box-shadow:0 1px 4px #0006}
.vplm-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#f4f4f4;border:3px solid #333;box-shadow:0 1px 4px #0006}
.vplm-slider:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.vplm-slider:disabled{opacity:.35;cursor:not-allowed}
.vplm-scale{display:flex;justify-content:space-between;gap:5px;font-size:.72rem;opacity:.8}
.vplm-footnote{font-size:.78rem;line-height:1.5;opacity:.75;margin:18px 0 0}
.vplm-editor-placeholder{border:1px dashed #999;padding:22px;border-radius:8px;background:#f5f5f5;color:#222}
.vplm-editor-placeholder p{margin:8px 0}
@media(max-width:380px){.vplm-root{padding:14px}.vplm-controls{gap:12px}.vplm-control-title{font-size:.78rem}}

/* Colour-wheel contours follow the resolved theme, including the VP switch. */
.vplm-root{--vplm-divider:#fff;--vplm-selection:#000}
@media(prefers-color-scheme:dark){.vplm-root{--vplm-divider:#000;--vplm-selection:#fff}}
:is(html,body):is(.dark,.dark-mode,[data-theme="dark"]) .vplm-root{--vplm-divider:#000;--vplm-selection:#fff}
:is(html,body):is(.light,.light-mode,[data-theme="light"]) .vplm-root{--vplm-divider:#fff;--vplm-selection:#000}
html[data-vp-theme="dark"] .vplm-root{--vplm-divider:#000;--vplm-selection:#fff}
html[data-vp-theme="light"] .vplm-root{--vplm-divider:#fff;--vplm-selection:#000}
.vplm-root .vplm-segment{stroke:var(--vplm-divider)}
.vplm-root .vplm-selection-outline{stroke:var(--vplm-selection)}

/* Light and shadow: 3D scene is initialized only after a click. */
.vplm-shadow{max-width:740px}
.vplm-shadow-launch{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;background:color-mix(in srgb,currentColor 5%,transparent);border-radius:9px;padding:22px}
.vplm-shadow-launch p{margin:0;font-size:.9rem}
.vplm-shadow-start{background:transparent;color:inherit;border:1px solid currentColor;border-radius:7px;padding:11px 16px;cursor:pointer;font:inherit}
.vplm-shadow-view{width:100%;aspect-ratio:16/10;min-height:210px;overflow:hidden;border-radius:8px;background:#e5e7eb}
.vplm-shadow-view canvas{display:block;width:100%;height:100%}
.vplm-shadow-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin-top:20px}
.vplm-shadow-form label{display:flex;flex-direction:column;gap:8px;font-size:.86rem;font-weight:600}
.vplm-shadow-form input{width:100%;accent-color:currentColor}
.vplm-shadow-form select{padding:7px;border:1px solid #888;border-radius:5px;background:transparent;color:inherit}
.vplm-shadow-form output{font-size:.72rem;font-weight:400;opacity:.7}
.vplm-shadow-form [hidden]{display:none!important}
@media(max-width:480px){.vplm-shadow-form{grid-template-columns:1fr}.vplm-shadow-view{aspect-ratio:4/3}}

/* 3D atelier: original Three.js scene, scoped to the Gutenberg module. */
.vplm-shadow{max-width:860px}
.vplm-3d{font:inherit;color:inherit}
.vplm-3d-stage{position:relative;width:100%;height:clamp(290px,48vw,490px);overflow:hidden;border-radius:9px;background:#f5f3ed}
.vplm-3d-stage canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.vplm-3d-viewtag{position:absolute;top:15px;left:18px;font-size:11px;letter-spacing:1.5px;color:#627775;pointer-events:none}
.vplm-3d-hint{position:absolute;bottom:12px;left:12px;right:12px;pointer-events:none;color:#52615b;font-size:11px;text-align:center;text-shadow:0 1px 4px #fff}
.vplm-3d-controls{padding:20px 0 0}
.vplm-3d-controls h2{font-size:1.1rem;margin:0 0 12px}
.vplm-3d-controls h3{font-size:.8rem;text-transform:uppercase;letter-spacing:1px;margin:20px 0 12px;opacity:.8}
.vplm-3d-modes{display:flex;gap:8px;flex-wrap:wrap}
.vplm-3d-controls button{font:inherit;font-size:.85rem;cursor:pointer;padding:8px 12px;border:1px solid currentColor;border-radius:6px;background:transparent;color:inherit}
.vplm-3d-controls button.active{background:#32736e;color:#fff;border-color:#32736e}
.vplm-3d-controls label{display:block;margin:12px 0 5px;font-size:.86rem}
.vplm-3d-controls label span{float:right;font-variant-numeric:tabular-nums;opacity:.8}
.vplm-3d-controls input[type=range]{display:block;width:100%;accent-color:#32736e}
.vplm-3d-controls input[type=checkbox]{accent-color:#32736e}
.vplm-3d-controls #modelControls[hidden]{display:none}
.vplm-3d-controls #reset{display:block;margin:20px 0 0;width:100%}
.vplm-3d-note{font-size:.8rem;line-height:1.6;opacity:.8;margin:20px 0 0;border-top:1px solid currentColor;padding-top:14px}
.vplm-3d-error,.vplm-3d-loading{padding:55px 15px;text-align:center;color:#384741}
@media(max-width:480px){.vplm-shadow{padding:12px}.vplm-3d-stage{height:340px}.vplm-3d-hint{font-size:10px}}