.nn-sphere{--sphere-base:radial-gradient(circle closest-side, color-mix(in oklab, var(--sphere) 74%, white) 0%, var(--sphere) 62%, color-mix(in oklab, var(--sphere) 84%, black) 100%);background:radial-gradient(ellipse 15% 6% at 50% 5%, #fff9, transparent 100%), radial-gradient(ellipse 68% 28% at 50% 100%, #ffffff57, #ffffff1a 60%, transparent 100%), linear-gradient(180deg, #fff0 0%, #fff3 100%), var(--sphere-base);border-radius:9999px;display:block;position:relative;overflow:hidden;box-shadow:inset 0 0 0 .5px #ffffff24,0 1px 1.5px #0000008c,0 3px 6px -2px #00000080}.nn-sphere:before{content:"";pointer-events:none;background:linear-gradient(#ffffff80 0%,#fff0 100%);border-radius:50%;width:85%;height:38%;position:absolute;top:0;left:7.5%}.nn-sphere-free{--sphere-base:var(--sphere-wheel)}.nn-sphere:after{content:"";border-radius:inherit;opacity:0;transition:opacity var(--dur-micro) var(--ease-out);background:radial-gradient(circle at 35% 30%,#ffffff47,#0000 60%);position:absolute;inset:0}@media (hover:hover){.nn-sphere-option:hover .nn-sphere:after{opacity:1}}.nn-sphere-option .nn-sphere{transition:transform var(--dur-instant) var(--ease-out)}.nn-sphere-option:active .nn-sphere{transform:scale(.94)}.nn-sphere-hue{appearance:none;cursor:pointer;touch-action:pan-y;background:0 0;width:100%;height:32px}.nn-sphere-hue:focus-visible{outline:none}.nn-sphere-hue::-webkit-slider-runnable-track{background:var(--sphere-track);border-radius:9999px;height:12px;box-shadow:inset 0 1px 2px #00000073,inset 0 0 0 1px #f2f0eb14}.nn-sphere-hue::-moz-range-track{background:var(--sphere-track);border-radius:9999px;height:12px;box-shadow:inset 0 1px 2px #00000073,inset 0 0 0 1px #f2f0eb14}.nn-sphere-hue::-webkit-slider-thumb{appearance:none;background:radial-gradient(circle at 33% 26%, #ffffffe6 0, #ffffff59 9%, transparent 24%), radial-gradient(circle at 38% 34%, color-mix(in oklab, var(--sphere) 80%, white) 0, var(--sphere) 36%, color-mix(in oklab, var(--sphere) 50%, black) 100%);width:28px;height:28px;box-shadow:0 0 0 2px var(--color-ink), 0 2px 5px #0009;border-radius:9999px;margin-top:-8px}.nn-sphere-hue::-moz-range-thumb{background:radial-gradient(circle at 33% 26%, #ffffffe6 0, #ffffff59 9%, transparent 24%), radial-gradient(circle at 38% 34%, color-mix(in oklab, var(--sphere) 80%, white) 0, var(--sphere) 36%, color-mix(in oklab, var(--sphere) 50%, black) 100%);width:28px;height:28px;box-shadow:0 0 0 2px var(--color-ink), 0 2px 5px #0009;border:0;border-radius:9999px}.nn-sphere-hue:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--color-ink), 0 0 0 4px var(--color-paper)}.nn-sphere-hue:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px var(--color-ink), 0 0 0 4px var(--color-paper)}.nn-sphere-free-row{animation:nn-sphere-fade var(--dur-micro) var(--ease-out)}@keyframes nn-sphere-fade{0%{opacity:0}}@media (prefers-reduced-motion:reduce){.nn-sphere-option .nn-sphere,.nn-sphere:after{transition:none}.nn-sphere-option:active .nn-sphere{transform:none}.nn-sphere-free-row{animation-duration:var(--dur-instant)}}