:root{--fg-default: #192119;--bg-default: #f2f2f2;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5;color-scheme:light dark;color:var(--fg-default);background-color:var(--bg-default);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#color-diff-output{font-family:Fira Mono,Menlo,Consolas,monospace;font-size:.9rem;background:var(--json-bg, #f6f8fa);color:var(--json-fg, #24292e);padding:1rem;border-radius:6px;overflow-x:auto;line-height:1.5;white-space:pre-wrap}#color-diff-output .json-key{color:#005cc5}#color-diff-output .json-string{color:#032f62}#color-diff-output .json-number{color:#22863a}#color-diff-output .json-boolean{color:#d73a49}#color-diff-output .json-null{color:#6f42c1}@media (prefers-color-scheme: dark){:root{--bg-default: #192119;--fg-default: #f2f2f2}#color-diff-output{--json-bg: #22272e;--json-fg: #adbac7;background:var(--json-bg);color:var(--json-fg)}#color-diff-output .json-key{color:#79b8ff}#color-diff-output .json-string{color:#b392f0}#color-diff-output .json-number{color:#6bc46d}#color-diff-output .json-boolean{color:#f47067}#color-diff-output .json-null{color:#dcbdfb}}body{margin:0;display:flex;flex-direction:column;min-height:100vh;justify-content:space-between;align-items:center}section{display:flex;flex-basis:20rem;flex-flow:column}:root{--detail-view-background: #e2e2e2;@property --primary-color{syntax: "<color>"; inherits: true; initial-value: "#a3cae8";}--primary-color: #a3cae8;@property --primary-diff-color{syntax: "<color>"; inherits: true; initial-value: "#c84b4b";}--primary-diff-color: #c84b4b;@property --diff-hue{syntax: "<angle>"; inherits: true; initial-value: "0deg";}--diff-hue: 0deg;--diff-hue-color: #ffffff;@property --diff-sat{syntax: "<percentage>"; inherits: true; initial-value: "0%";}--diff-sat: 0%;--diff-sat-color: #ffffff;@property --diff-lgt{syntax: "<percentage>"; inherits: true; initial-value: "0%";}--diff-lgt: 0%;--diff-lgt-color: #ffffff;@property --verify-adjust-color-hsl{syntax: "<color>"; inherits: true; initial-value: "#c84b4b";}--verify-adjust-color-hsl: #c84b4b;--mask-circle-gradient: radial-gradient( 13px circle, transparent 5px, #8c8c8c 14px, var(--detail-view-background) 14px );--moving-bar: #000a2e;--static-center-bar: #0e1531;--mask-linear-gradient: linear-gradient( 0deg, transparent 38%, var(--detail-view-background) 100% );--mask-center-axis: linear-gradient( 90deg, transparent 48%, var(--static-center-bar) 50%, transparent 52% );--x-axis-gradient: linear-gradient( var(--diff-hue), transparent 47%, red 50%, transparent 53% );--y-axis-gradient: linear-gradient( calc(var(--diff-hue) + 90deg), transparent 47%, green 50%, transparent 53% )}.diff:after{content:"$diff"}div{display:flex;text-align:start;margin:.1em 1em;padding:0 4px;height:2.4rem;box-sizing:border-box;border-radius:4px;align-items:baseline;justify-content:space-between;align-items:center;gap:.75rem;min-width:20rem;max-inline-size:fit-content}div:first-of-type .detail-label:before,div:nth-of-type(2) .detail-label:before,div:nth-of-type(3n+2) .detail-label:before,div:last-of-type .detail-label:before{border:1px inset;border-radius:8%/12%}div[class^=detail-]:after{align-content:flex-end;text-align:right;min-width:120px}div[class^=detail-]{text-align:left;border-bottom:1px inset #888}.detail-label{display:flex;font-weight:600;align-items:center;gap:.75rem}.detail-label:before{display:block;background-color:var(--detail-view-background);width:4rem;height:2rem;content:"  "}.detail-1 .detail-label:before{background-color:var(--primary-color)}.detail-2 .detail-label:before{background-color:var(--primary-diff-color)}.detail-3 .detail-label:before{--moving-var: calc((((var(--primary-hue) / 360) * 100) + 100) * .5%);max-width:var(--moving-var);background-image:linear-gradient(90deg,transparent calc(var(--moving-var) - 3%),var(--moving-bar) var(--moving-var),transparent calc(var(--moving-var) + 3%));border-inline-start:1px solid var(--diff-hue-color);border-inline-end:1px solid var(--diff-hue-color)}.detail-4 .detail-label:before{--moving-var: calc((((var(--delta-hue) / 360) * 100) + 100) * .5%);background-image:linear-gradient(90deg,transparent calc(var(--moving-var) - 3%),var(--moving-bar) var(--moving-var),transparent calc(var(--moving-var) + 3%));border-inline-start:1px solid var(--diff-hue-color);border-inline-end:1px solid var(--diff-hue-color)}.detail-5 .detail-label:before{background-image:radial-gradient(circle,transparent 40%,var(--diff-hue-color) 41%,var(--diff-hue-color) 93%,transparent 100%),var(--mask-circle-gradient),linear-gradient(var(--diff-hue),transparent 47%,red 50%,transparent 53%),linear-gradient(calc(var(--diff-hue) + 90deg),transparent 47%,green 50%,transparent 53%)}.detail-6 .detail-label:before{--moving-var: calc((var(--primary-sat) + 100%) / 2);background-image:var(--mask-center-axis),var(--mask-linear-gradient),linear-gradient(90deg,transparent calc(var(--moving-var) - 3%),var(--moving-bar) var(--moving-var),transparent calc(var(--moving-var) + 3%))}.detail-7 .detail-label:before{--moving-var: calc((var(--delta-sat) + 100%) / 2);background-image:var(--mask-center-axis),var(--mask-linear-gradient),linear-gradient(90deg,transparent calc(var(--moving-var) - 3%),var(--moving-bar) var(--moving-var),transparent calc(var(--moving-var) + 3%))}.detail-8 .detail-label:before{--moving-var: calc((var(--diff-sat) + 100%) / 2);background-image:var(--mask-center-axis),var(--mask-linear-gradient),linear-gradient(90deg,transparent calc(var(--moving-var) - 3%),var(--moving-bar) var(--moving-var),transparent calc(var(--moving-var) + 3%))}.detail-9 .detail-label:before{--moving-var: calc((var(--primary-lgt) + 100%) / 2);background-image:var(--mask-center-axis),var(--mask-linear-gradient),linear-gradient(90deg,transparent calc(var(--moving-var) - 3%),var(--moving-bar) var(--moving-var),transparent calc(var(--moving-var) + 3%))}.detail-10 .detail-label:before{--moving-var: calc((var(--delta-lgt) + 100%) / 2);background-image:var(--mask-center-axis),var(--mask-linear-gradient),linear-gradient(90deg,transparent calc(var(--moving-var) - 3%),var(--moving-bar) var(--moving-var),transparent calc(var(--moving-var) + 3%))}.detail-11 .detail-label:before{--moving-var: calc((var(--diff-lgt) + 100%) / 2);background-image:var(--mask-center-axis),var(--mask-linear-gradient),linear-gradient(90deg,transparent calc(var(--moving-var) - 3%),var(--moving-bar) var(--moving-var),transparent calc(var(--moving-var) + 3%))}.detail-12 .detail-label:before{background-color:var(--verify-adjust-color-hsl)}h1,p{padding-inline:1rem;line-height:1.56em}form{display:inline-block;padding-inline:1rem;min-inline-size:20rem}fieldset{max-width:20rem;display:grid;grid-template-areas:"label color";justify-content:space-between;align-content:stretch;align-items:center;gap:.5rem;margin:1rem auto}footer{padding:1rem;font-size:small}