html{background-color:#222}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{text-align:center}.App-logo{pointer-events:none;height:5vmin;position:absolute;top:5px;right:5px}@media (prefers-reduced-motion:no-preference){.App-logo{animation:10s linear infinite App-logo-spin}}.App-header{color:#fff;background-color:#282c34;flex-direction:column;justify-content:center;align-items:center;font-size:calc(10px + 2vmin);display:flex}.footer{color:#aaa;background-color:#282c34;padding:20px;font-size:20px}.footer a{color:#ccc}.App-link{color:#61dafb}.body{background-color:#222;min-height:calc(100vh - 159px);padding:8px;box-shadow:inset 0 0 5px #000}@keyframes App-logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.DynamicSliderLabel{color:#666;margin-bottom:-4px;font-size:.75em}.DynamicSlider-Input{appearance:none;cursor:pointer;background:#555;border-radius:2px;outline:none;width:300px;height:4px;margin:12px 0}.DynamicSlider-Input::-webkit-slider-thumb{appearance:none;background:#888;border:0;border-radius:50%;width:16px;height:16px}.DynamicSlider-Input::-moz-range-thumb{background:#888;border:0;border-radius:50%;width:16px;height:16px}.DynamicSlider-Input::-moz-range-track{background:#555;border-radius:2px;height:4px}.DynamicSlider-Input:focus-visible{outline-offset:4px;outline:2px solid #aaa}.HueWheel .HueWheel-Values{stroke-width:.2px;stroke:#222}.WheelOutline{fill:#111}.HueWheel .HueWheel-BG{opacity:.2}.HueWheel .HueWheel-Scales{stroke:#0003;stroke-width:.2px;fill:none}.HueWheel .HueWheel-Harmonies path{stroke:#fafafae6;stroke-width:.25px}.Button{cursor:pointer;-webkit-user-select:none;user-select:none;background-color:#383838;border:1px solid #505050;border-radius:3px;margin:0 3px;padding:4px 7px;font-weight:700;display:inline-block;box-shadow:0 0 3px #000}.SvgProgressBar .ProgressBar-Progress{fill:#aaa;stroke:#fff;stroke-width:1px}.SvgProgressBar .ProgressBar-Back{fill:#1a1a1a;stroke:#000;stroke-width:1px}.HarmonySelector{margin:4px 0 8px}.HarmonySelector>div{color:#aaa}.HarmonySelectorSlider{max-height:1000px;transition:max-height .2s;overflow-y:hidden}.HarmonySelector-Harmony{background:#383838;border:1px solid #505050;border-radius:10px;width:calc(60px + 5vw);max-height:calc(80px + 12vw);margin:5px;transition:max-height .1s,visibility .12s;display:inline-block;overflow-y:hidden}.HarmonySelectorSlider.Hide{max-height:0}.HarmonySelectorSlider.Hide .HarmonySelector-Harmony{visibility:hidden;max-height:0}.HarmonySelector-Harmony.notSelected{cursor:pointer;box-shadow:0 0 4px #000}.HarmonySelector-Harmony.selected{background:#292929;border-color:#353535;box-shadow:inset 0 0 4px #000}.HarmonySelector-Harmony h5{color:#777;vertical-align:bottom;height:2em;margin:4px 0 3px;font-size:calc(5px + .6vw)}.HarmonySelector-Harmony p{color:#777;margin:0;font-size:.7em}svg.HarmonySelector-HarmonyWheel{width:calc(40px + 6vw);height:calc(50px + 6vw);margin-top:0}.HarmonySelector-HarmonyCircle{fill:#222;stroke:#ffffff80;stroke-width:1px}.HarmonySelector-Coverage{color:#9a9a9a;font-variant-numeric:tabular-nums;white-space:nowrap;display:inline-block}.ColorInfoHarmony{margin-top:-4px;margin-bottom:1px}.ColorInfo{color:#666;text-align:center;vertical-align:middle;font-size:.6em}.ColorInfo div{vertical-align:middle;margin:0 4px;display:inline-block}.ColorInfo-Hue{text-align:right;width:45px;margin-right:4px}.ColorInfo-Hex{text-align:left;width:50px;font-family:monospace}.ColorInfo-RGB{text-align:left;width:80px}.ColorSwatch{vertical-align:middle;width:20px;height:18px;display:inline-block;box-shadow:inset 0 0 2px #000}.ColorInfo:first-child .ColorSwatch{border-top-left-radius:6px;border-top-right-radius:6px}.ColorInfo:last-child .ColorSwatch{border-bottom-right-radius:6px;border-bottom-left-radius:6px}.hidden{display:none}.ImageAnalyzer{-webkit-user-select:none;user-select:none;background-color:#1f1f1f;border-radius:10px;margin:2vmin 1vw;padding:8px 12px;box-shadow:inset 0 0 5px #000}.img-wrapper img,.img-wrapper canvas{color:#aaa;background-color:#000;border:3px solid #111;max-width:max(30vw,297px);max-height:max(30vw,297px)}svg{vertical-align:middle}.img-wrapper{text-align:center;vertical-align:top;width:max(30vw,300px);margin:0 5px;display:inline-block}.analytics{vertical-align:top;display:inline-block}.analytics .DynamicSlider-Input{width:100%}.WheelGrid{grid-template-columns:repeat(2,minmax(0,1fr));place-items:start center;column-gap:4px;max-width:604px;display:grid}.WheelGrid svg.HueWheel{width:100%;max-width:300px;height:auto;display:block}.ImageAnalyzer .WheelGrid-Head{letter-spacing:.08em;text-transform:uppercase;color:#777;margin:0 0 2px;font-size:.8em;font-weight:400}.ImageAlter{vertical-align:top;margin:0 5px;display:inline-block}.ImageAnalyzer div h4{color:#777;margin:8px 0 5px;line-height:1em}.img-Result-Fullsize{cursor:pointer}.img-Result-Thumbnail{cursor:progress}.file-drop>.file-drop-target.file-drop-dragging-over-frame{box-shadow:none;z-index:50;opacity:1;color:#fff;background-color:#000000a6;border:none}.file-drop>.file-drop-target.file-drop-dragging-over-target{color:#ff6e40;box-shadow:0 0 13px 3px #ff6e40}.ImageSelector .ImageSelector-FileBrowser{background:#666;border-radius:8px;margin:10px auto 0;padding:7px 15px;display:inline-block;box-shadow:inset 0 0 5px #00000080}h1{vertical-align:middle;margin:5px 0 0}h1 img{vertical-align:middle;margin-bottom:9px;margin-right:10px}p{color:#aaa;margin:4px 0;font-size:.8em;line-height:1.2em}