@property --new-control-available-radius{syntax:"<length>"; inherits:true; initial-value:0px;}@property --new-control-orbit-gap{syntax:"<length>"; inherits:true; initial-value:0px;}@property --new-control-inner-gutter{syntax:"<length>"; inherits:true; initial-value:0px;}@property --grade-center-point-size{syntax:"<length>"; inherits:true; initial-value:0px;}.new-control{position:relative;min-width:0;min-height:0;container-type:size;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);font-family:var(--font-ui);--control-scale: 1;--action-row-height: var(--inspector-action-size);--action-inset-inline: var(--curve-header-inset, var(--s-6));--action-inset-block: calc(var(--action-inset-inline) + (var(--ui-control-font-size) * 1.4 - var(--action-row-height)) / 2);--movement-diameter: calc(min( 100cqi, 100cqb, calc(2*hypot( max(0px, calc(50cqi - var(--action-inset-inline) - var(--action-row-height) * 2 - var(--s-1))), max(0px, calc(50cqb - var(--action-inset-block) - var(--action-row-height))) )) ) - var(--s-3) * 2)}.new-control .stage{display:grid;place-items:center;min-height:0}.new-control.grade-mode-view{--new-control-ring-reserve: var(--curve-heading-height);grid-template-rows:var(--grading-card-header-end) minmax(0,1fr)}.new-control.grade-mode-view .stage{grid-row:2;container-type:size;--movement-diameter: calc(min(100cqi, calc(100cqb + var(--grading-card-header-end) - var(--new-control-ring-reserve))) - var(--s-3) * 2)}.new-control .arena{position:relative;width:calc(var(--movement-diameter) * var(--new-control-fit));max-width:var(--new-control-max-size);margin:auto;aspect-ratio:1;user-select:none;overflow:visible}.new-control.grade-mode-view .arena{top:0;--new-control-orbit-gap: var(--s-1);--grade-center-point-size: calc(var(--new-control-point-size) * min(1, min(var(--new-control-max-size), calc((var(--movement-diameter) - var(--grade-point-layout-size)) / (1 / var(--new-control-center-fit) - var(--new-control-handle-size) / var(--new-control-control-size)))) / var(--new-control-control-size)));--new-control-available-radius: calc(min(100cqi, 100cqb) / 2 - var(--s-2) - var(--grading-line-width) - 1px);width:calc((var(--movement-diameter) * var(--new-control-stage-fill) - var(--grade-point-layout-size)) / (1 / var(--new-control-fit) - var(--new-control-handle-size) / var(--new-control-control-size)))}.new-control.grade-mode-view:is([data-wheel=primaries],[data-wheel=printer]) .arena{width:var(--grade-square-arena-size)}.new-control.grade-mode-view[data-wheel=hue] .arena{--new-control-available-radius:calc(min(100cqi,100cqb)/2 - var(--s-1))}.new-control.grade-mode-view[data-wheel=color] .arena{--new-control-inner-gutter: calc(var(--grade-point-diameter) + var(--new-control-orbit-gap) + var(--grading-line-width) / 2)}.new-control.grade-mode-view[data-shape=square] .arena{--new-control-ring-scale: var(--new-control-square-ring-scale)}.new-control .pad{position:absolute;inset:calc((1 - var(--new-control-ring-scale)) * 50%);border:0;border-radius:50%;background:var(--grade-card-background, var(--c-plane));z-index:1}.new-control[data-shape=square] .pad{border-radius:9%}.new-control[data-shape=triangle]{--new-control-ring-scale: var(--new-control-triangle-ring-scale)}.new-control[data-shape=circle]{--new-control-ring-scale: var(--new-control-circle-ring-scale)}.new-control[data-shape=triangle] .pad{border-radius:0}.new-control .perimeterPoint .pointCue{display:none}.new-control .control-home{--control-home-surface:var(--grade-card-background,var(--c-plane));position:absolute;z-index:19;transform:translate(-50%,-50%);touch-action:none}.new-control .control-home[hidden]{display:none}.new-control .halo,.new-control .dragGuide{position:absolute;pointer-events:none}.new-control .halo{left:-30%;top:-30%;width:160%;height:160%;z-index:3;transition:opacity var(--speed) var(--ease)}.new-control.guiding:has(.pointWrap.dragged [data-part=macroPoint]) .halo{filter:var(--control-dim-filter)}.new-control .dragGuide{left:50%;top:50%;width:var(--new-control-guide-size, 200%);height:var(--new-control-guide-size, 200%);transform:translate(-50%,-50%);z-index:2}.new-control .point,.new-control .spectrumHandle{padding:0;border:0;border-radius:50%;box-shadow:none;cursor:pointer}.new-control .point:before,.new-control .spectrumHandle:before{content:"";position:absolute;left:50%;top:50%;width:var(--control-touch-target);height:var(--control-touch-target);transform:translate(-50%,-50%);border-radius:50%;clip-path:var(--new-control-point-hit-clip,none)}.new-control .connector{position:absolute;color:var(--handle-color,var(--c-text-soft));fill:currentColor;overflow:visible;transform-origin:0 50%;pointer-events:none;z-index:4}.new-control .pointWrap{position:absolute;transform:translate(-50%,-50%);z-index:20}.new-control .point,.new-control button.point:not(:disabled):is(:active,:focus-visible){display:block;position:relative;width:100%;height:100%;background:var(--handle-color,var(--c-text-soft));touch-action:none;transform:scale(var(--new-control-point-visual-scale))}.new-control .spectrumHandle:before,.new-control .perimeterPoint .point:before{clip-path:var(--new-control-outer-hit-clip, none)}.new-control .point:before{width:max(100%,calc(var(--control-touch-target) / var(--new-control-point-visual-scale)));height:max(100%,calc(var(--control-touch-target) / var(--new-control-point-visual-scale)))}.new-control .spectrumHandle{--handle-diameter: calc(var(--new-control-handle-size) * var(--control-scale));--cue-scale: calc(var(--handle-diameter) / var(--new-control-handle-size))}.new-control .spectrumHandle,.new-control button.spectrumHandle:not(:disabled):is(:active,:focus-visible){--handle-color: var(--c-text-soft);position:absolute;width:var(--handle-diameter);height:var(--handle-diameter);transform:translate(-50%,-50%);background:var(--handle-color);z-index:55;touch-action:none}.new-control.grade-mode-view .spectrumHandle{--handle-diameter:var(--grade-point-diameter)}.new-control .spectrumHandle:after,.new-control .directionHandle:after,.new-control .inwardCue,.new-control .pointCue{--cue-opacity: var( --outward-cue-opacity, var(--new-control-indicator-opacity) );content:"";position:absolute;left:50%;top:50%;width:calc(var(--new-control-caret-length) * var(--cue-scale, var(--control-scale)));height:calc(var(--new-control-caret-length) * 1.75 * var(--cue-scale, var(--control-scale)));transform-origin:0 50%;transform:translateY(-50%) rotate(var(--pull-angle, 0rad)) translate(var(--outward-cue-offset));background:var(--cue-color, var(--c-text-soft));opacity:0;pointer-events:none;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 2l5 5-5 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}.new-control .inwardCue{--cue-opacity: var(--new-control-indicator-opacity);transform:translateY(-50%) rotate(calc(var(--pull-angle, 0rad) + .5turn)) translate(var(--inward-cue-offset))}.new-control .directionHandle,.new-control button.directionHandle:not(:disabled):is(:active,:focus-visible){--cue-scale:calc(var(--grade-point-diameter)*1.25/var(--new-control-handle-size));background:transparent}.new-control .directionHandle:after{transform:translate(-50%,-50%) rotate(var(--pull-angle));transform-origin:50% 50%;background:var(--handle-color,var(--c-text-soft));opacity:1}.new-control .directionHandle .pointCue{display:none}.new-control .directionHandle:before,.new-control .perimeterPoint .directionHandle:before{width:var(--control-touch-target);height:var(--control-touch-target);clip-path:var(--new-control-outer-hit-clip)}.new-control .directionHandle:not(:disabled):focus-visible:after{filter:drop-shadow(0 0 var(--hairline) var(--c-text))}.new-control[data-wheel=printer] .connector:not([data-part=macroPointConnector]){visibility:hidden}.new-control[data-wheel=printer] .connector:not([data-part=macroPointConnector]):has(+.dragged){visibility:visible}.new-control .pointGroupCount{position:absolute;inset:0;display:grid;place-items:center;color:var(--c-text);font:var(--ui-font-weight) calc(var(--handle-diameter) * .6)/1 var(--font-ui);pointer-events:none}.new-control .pointCue{transform:translateY(-50%) rotate(var(--point-cue-angle)) translate(calc(var(--point-display-size) / 2 + var(--new-control-arrow-gap) * var(--control-scale)))}@media(hover:hover){.new-control:not(.guiding) .spectrumHandle:not(.directionHandle):hover:after,.new-control:not(.guiding) .spectrumHandle:not(.directionHandle):hover .inwardCue{opacity:var(--cue-opacity)}.new-control:not(.guiding) .point:hover .pointCue{opacity:var(--new-control-indicator-opacity)}}.new-control .hueHandle{background:linear-gradient(90deg,var(--original-color) 0 50%,var(--current-color) 50% 100%)}.new-control .hueHandle[data-coverage="0.00"]:not([data-selected],:hover,:focus-visible,.dragged){filter:var(--control-dim-filter)}.new-control[data-wheel=hue].guiding:has(.spectrumHandle.dragged) :is(.pointWrap:not(.dragged),.spectrumHandle:not(.dragged),.connector:not(:has(+.spectrumHandle.dragged,+.pointWrap.dragged))){visibility:hidden}.new-control .caption{position:absolute;inset:var(--action-inset-block) var(--action-inset-inline) auto auto;z-index:60;display:flex;align-items:center;justify-content:flex-end;min-height:var(--action-row-height)}.new-control .status{position:absolute;inset-inline:auto;left:50%;top:calc(50% + 25% * var(--new-control-ring-scale) + max(var(--grade-center-point-size),calc(var(--new-control-point-size) * var(--control-scale))) * var(--new-control-point-visual-scale) / 4);bottom:auto;transform:translate(-50%,-50%);width:max-content;max-width:calc(var(--new-control-ring-scale) * 70%);z-index:4;min-width:0;margin:0;text-align:center;color:var(--grading-label-color);font-size:calc(.95*clamp(min(var(--fs-sm),var(--grading-label-font-size)),calc(var(--new-control-control-size) * var(--control-scale) * .06),var(--grading-label-font-size)));line-height:var(--lh-caption);white-space:nowrap;pointer-events:none;user-select:none}.new-control[data-wheel=primaries].guiding:has(.pointWrap.dragged [data-part=macroPoint]) .status{top:calc(50% + var(--new-control-macro-guide-radius) / 2 + max(var(--grade-center-point-size),calc(var(--new-control-point-size) * var(--control-scale))) * var(--new-control-point-visual-scale) / 4);max-width:calc(var(--new-control-macro-guide-radius) * 2 - var(--s-2) * 2)}.new-control[data-wheel=hue].guiding:has(.spectrumHandle.dragged) .status{top:50%}.new-control .statusName,.new-control .statusValue{display:block;width:max-content;max-width:100%;margin-inline:auto}.new-control.guiding .status{color:var(--c-text)}.new-control.guiding :is(.pointWrap.dragged .point,.spectrumHandle.dragged):not(.directionHandle){box-shadow:0 0 0 var(--hairline) var(--c-app)}.new-control .labelActions{display:flex;align-items:center;gap:var(--s-1)}.new-control .labelAction{display:grid;place-items:center;flex-shrink:0;width:var(--action-row-height);height:var(--action-row-height);min-height:0;padding:0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--c-text-dim);cursor:pointer;touch-action:none}.new-control .labelAction svg{display:block;width:var(--new-control-action-size);height:var(--new-control-action-size);pointer-events:none}.new-control .labelAction:not(:disabled):is(:hover,:focus-visible,:active){background:transparent;color:var(--c-text-soft)}.new-control .labelAction:not(:disabled)[aria-pressed=true]{color:var(--c-text);background:var(--c-control-active)}.app-shell[data-touch-primary=true] .new-control{--action-row-height: var(--control-height)}.new-control [hidden]{display:none}.new-control .control-coverage{bottom:calc(-1 * var(--s-2))}.new-control .hueHandle .control-coverage{left:calc(50% + var(--coverage-x));top:calc(50% + var(--coverage-y));bottom:auto;width:var(--coverage-width);height:var(--coverage-height);opacity:var(--coverage-opacity);transform:translate(-50%,-50%) rotate(var(--coverage-angle))}