.color-wheel-picker,.hex-picker{margin:0 0 1rem;display:block}.color-wheel-picker .field,.hex-picker .field{margin:0}.picker-trigger{width:100%;display:flex;align-items:center;gap:.6rem;text-align:left;padding:.55rem .7rem!important;background:var(--bg)!important;border:1px solid var(--border)!important;color:var(--text)!important}.picker-trigger:hover{border-color:var(--border-hi)!important}.picker-trigger-swatch{width:1.4rem;height:1.4rem;border-radius:50%;background:var(--border);border:1px solid var(--border-hi);flex-shrink:0}.picker-trigger-name{flex:1;color:var(--text)}.picker-trigger-arrow{color:var(--muted);font-size:.85rem}.picker-dialog{border:1px solid var(--border-hi);background:var(--bg);color:var(--text);padding:0;border-radius:var(--radius);max-width:920px;width:92vw;max-height:86vh;box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden}.picker-dialog[open]{display:flex;flex-direction:column}.picker-dialog::backdrop{background:rgba(8,9,12,.75);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.picker-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.1rem 1.25rem;border-bottom:1px solid var(--border);background:var(--surface)}.picker-dialog-head h3{margin:0;font-size:1.15rem;letter-spacing:-.015em}.picker-dialog-lede{margin:.25rem 0 0;color:var(--muted-hi);font-size:.92rem}.picker-close{background:0 0;border:1px solid var(--border);color:var(--muted-hi);width:2rem;height:2rem;border-radius:50%;line-height:1;font-size:1.2rem;cursor:pointer}.picker-close:hover{border-color:var(--border-hi);color:var(--text)}.honeycomb{--hex-w:124px;--hex-h:calc(var(--hex-w) * 2 / 1.7320508);--hex-row-overlap:calc((var(--hex-h) / 4) + 1px);--hex-col-shift:calc(var(--hex-w) / 2);flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:1rem 0;background:var(--bg);display:flex;flex-direction:column}.honeycomb-inner{width:max-content;max-width:100%;margin:0 auto}.honeycomb-row{display:flex}.honeycomb-row+.honeycomb-row{margin-top:calc(-1 * var(--hex-row-overlap))}.honeycomb-row.row-narrow{margin-left:var(--hex-col-shift)}.honeycomb .hex{width:var(--hex-w);height:var(--hex-h);clip-path:var(--clip-hex,polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%));background:var(--surface);cursor:pointer;position:relative;transition:filter 120ms ease;display:grid;place-items:center;overflow:hidden}.honeycomb .hex:hover{filter:brightness(1.18)}.honeycomb .hex:focus{outline:0;filter:brightness(1.18)}.honeycomb .hex:focus-visible{outline:0;box-shadow:inset 0 0 0 4px var(--accent)}.honeycomb .hex.preview-selected{box-shadow:inset 0 0 0 4px var(--accent);filter:brightness(1.08)}.honeycomb .hex-swatch{position:absolute;inset:0;z-index:0}.honeycomb .hex-label{position:relative;z-index:1;align-self:end;width:100%;text-align:center;padding:.3rem .5rem .6rem;color:var(--text);font-weight:600;font-size:.92rem;letter-spacing:-.005em;text-shadow:0 1px 2px rgba(0,0,0,.5),0 0 6px rgba(0,0,0,.35)}.picker-detail-panel{flex:0 0 auto;border-top:1px solid var(--border);background:var(--surface);padding:1rem 1.25rem;min-height:7rem}.picker-detail-empty{color:var(--muted-hi);padding:.5rem 0}.picker-detail-empty p{margin:0}.picker-detail-content{display:flex;gap:1rem;align-items:flex-start}.picker-detail-swatch{flex:0 0 auto;width:70px;height:70px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:var(--border)}.picker-detail-info{flex:1}.picker-detail-name{margin:0 0 .15rem;font-size:1.05rem;letter-spacing:-.01em}.picker-detail-tagline{margin:0 0 .45rem;color:var(--muted-hi);font-size:.88rem}.picker-detail-text{margin:0 0 .85rem;color:var(--text);font-size:.88rem;line-height:1.45}.picker-detail-confirm.btn{padding:.5rem 1.1rem}@media (max-width:540px){.honeycomb{--hex-w:96px;--hex-h:111px;--hex-row-overlap:28px}.honeycomb .hex-label{font-size:.82rem}.picker-detail-content{flex-direction:column;gap:.6rem}}.color-wheel-dialog{max-width:1040px}.color-wheel-dialog .color-wheel-stage{flex:1;display:flex;flex-direction:column;align-items:stretch;gap:.6rem;padding:1rem 1.25rem 1.4rem;overflow-y:auto}.color-scatter-controls,.color-wheel-controls{display:flex;gap:.4rem;align-self:flex-end}.color-wheel-viewport{position:relative;width:100%;max-width:720px;aspect-ratio:1/1;margin:0 auto;overflow:hidden;border-radius:var(--radius);border:1px solid var(--border);background:radial-gradient(circle at center,var(--surface) 0,var(--bg) 95%);touch-action:none}.color-wheel{position:absolute;inset:0;transform-origin:50% 50%;transform:translate(var(--pan-x,0),var(--pan-y,0)) scale(var(--zoom,1));transition:transform 80ms ease-out}.color-wheel-hue-ring{position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:.42;background:conic-gradient(from 0deg,#f1d23a 0deg,#e7a234 30deg,#d05c3a 60deg,#c23866 90deg,#8c3aae 120deg,#4a4bc4 160deg,#2f8acb 200deg,#2faa9a 240deg,#3da64a 280deg,#82b03a 320deg,#f1d23a 360deg);-webkit-mask:radial-gradient(circle,transparent 0 14%,#000 14.5% 44%,transparent 44.5%);mask:radial-gradient(circle,transparent 0 14%,#000 14.5% 44%,transparent 44.5%)}.color-wheel-column-rail{position:absolute;left:50%;top:7%;width:7%;height:86%;transform:translateX(-50%);border-radius:999px;background:linear-gradient(to bottom,rgba(245,245,245,.18) 0,rgba(120,120,120,.1) 50%,rgba(15,15,15,.22) 100%);border:1px solid var(--border);pointer-events:none}.color-wheel-axis-label{position:absolute;color:var(--muted-hi);font-size:clamp(.7rem, 1.4vw, .92rem);font-weight:700;letter-spacing:.1em;pointer-events:none;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.55)}.color-wheel-axis-label.axis-hue-red{top:50%;right:10px;transform:translateY(-50%);color:#d05c3a}.color-wheel-axis-label.axis-hue-yellow{top:8px;left:50%;transform:translateX(-50%);color:#d8b333}.color-wheel-axis-label.axis-hue-green{top:50%;left:10px;transform:translateY(-50%);color:#3da64a}.color-wheel-axis-label.axis-hue-blue{bottom:8px;left:50%;transform:translateX(-50%);color:#4a7bd4}.color-wheel-axis-label.axis-light-top{top:8px;left:calc(50% + 5%);color:var(--muted-hi)}.color-wheel-axis-label.axis-light-bottom{bottom:8px;left:calc(50% + 5%);color:var(--muted-hi)}.wheel-dot{position:absolute;width:clamp(30px,7.2%,56px);height:clamp(26px,6.4%,50px);transform:translate(-50%,-50%);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);cursor:pointer;display:grid;place-items:end center;transition:filter 120ms ease,transform 120ms ease;box-shadow:0 1px 3px rgba(0,0,0,.55)}.wheel-dot-achromatic{width:clamp(24px,5.6%,44px);height:clamp(20px,5%,40px)}.wheel-dot:hover{filter:brightness(1.2);z-index:5}.wheel-dot:focus{outline:0;filter:brightness(1.2);z-index:5}.wheel-dot.preview-selected{box-shadow:0 0 0 3px var(--accent),0 4px 12px rgba(0,0,0,.55);z-index:6}.wheel-dot-muted{opacity:.2;cursor:not-allowed;filter:grayscale(.6)}.wheel-dot-muted:hover{filter:grayscale(.6)}.wheel-dot-label{font-size:clamp(.55rem, 1.3vw, .78rem);font-weight:600;color:var(--text);text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 4px rgba(0,0,0,.45);padding-bottom:4px;line-height:1;pointer-events:none}.color-wheel-advanced{width:100%;max-width:620px;padding:.4rem 1rem 1rem;border-top:1px solid var(--border);background:var(--surface)}.color-wheel-advanced summary{cursor:pointer;padding:.6rem 0;color:var(--muted-hi);font-size:.9rem;letter-spacing:.02em;list-style:none}.color-wheel-advanced summary::before{content:"â–¸ ";display:inline-block;transition:transform 120ms ease}.color-wheel-advanced[open] summary::before{transform:rotate(90deg)}.color-wheel-advanced-lede{margin:0 0 .6rem;color:var(--muted-hi);font-size:.82rem;line-height:1.4}.color-wheel-advanced-lede em{font-style:normal;font-weight:600;color:var(--text)}.color-scatter-viewport{position:relative;width:100%;height:clamp(360px,50vh,560px);perspective:1200px;overflow:hidden;border-radius:var(--radius);border:1px solid var(--border);background:radial-gradient(ellipse at center,var(--surface) 0,var(--bg) 95%);cursor:grab;touch-action:none}.color-scatter-viewport:active{cursor:grabbing}.color-scatter{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(var(--pitch,18deg)) rotateY(var(--yaw,-28deg));transition:transform 60ms linear}.color-scatter-scene{transform-style:preserve-3d}.color-scatter-floor{position:absolute;left:0;top:0;width:400px;height:400px;margin:-200px 0 0 -200px;border-radius:50%;border:1px solid var(--border-hi);background:radial-gradient(circle,rgba(120,120,140,.1) 0,rgba(80,80,100,.04) 70%,transparent 100%);transform:rotateX(90deg)}.color-scatter-axis-jz{position:absolute;left:-.5px;top:-130px;width:1px;height:260px;background:var(--border-hi);opacity:.5}.color-scatter-axis-label{position:absolute;color:var(--muted-hi);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.7);transform-style:preserve-3d;white-space:nowrap}.color-scatter-axis-label.axis-jz-top{transform:translate3d(-12px,-148px,0)}.color-scatter-axis-label.axis-jz-bottom{transform:translate3d(-12px,130px,0)}.color-scatter-axis-label.axis-az-pos{transform:translate3d(204px,0,0)}.color-scatter-axis-label.axis-az-neg{transform:translate3d(-236px,0,0)}.color-scatter-axis-label.axis-bz-pos{transform:translate3d(0,0,204px)}.color-scatter-axis-label.axis-bz-neg{transform:translate3d(0,0,-236px)}.scatter-dot{position:absolute;left:0;top:0;width:44px;height:38px;margin:-19px 0 0 -22px;cursor:pointer;transform-style:preserve-3d}.scatter-dot svg{display:block;width:100%;height:100%;filter:drop-shadow(0 1px 3px rgba(0, 0, 0, .6))}.scatter-dot:hover svg{filter:brightness(1.2) drop-shadow(0 2px 4px rgba(0, 0, 0, .7))}.scatter-dot:focus{outline:0}.scatter-dot:focus svg{filter:brightness(1.2) drop-shadow(0 2px 4px rgba(0, 0, 0, .7))}.scatter-dot.preview-selected svg{filter:drop-shadow(0 0 0 var(--accent)) drop-shadow(0 0 2px var(--accent)) drop-shadow(0 4px 12px rgba(0, 0, 0, .55))}.scatter-dot-muted{opacity:.2;cursor:not-allowed}.scatter-dot-muted svg{filter:grayscale(.6)}.scatter-dot-label{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);font-size:.58rem;font-weight:600;color:var(--text);text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 4px rgba(0,0,0,.45);line-height:1;pointer-events:none;white-space:nowrap}@media (max-width:540px){.color-wheel-dialog .color-wheel-stage{padding:.8rem .6rem 1rem}.scatter-dot{width:36px;height:32px;margin:-16px 0 0 -18px}}