body{background-color:#1f1f1f;font-size:20px}.container{flex-direction:column;align-items:center;display:flex}.top-section{align-items:center;gap:10px;display:flex}#image-dropdown{color:#e1e1e1;background-color:#2d2d2d;border:1px solid #dcdcdc;border-radius:8px;margin-bottom:24px;padding:4px 12px;position:relative;left:-3%}#slider{background-color:#1f1f1f;width:896px;margin-top:24px}input[type=range]{appearance:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background-color:#22e6e1;border:1px solid #22e6e1;border-radius:100%;width:24px;height:24px;transform:translateY(-50%);box-shadow:inset 0 0 2px 2px #0009}input[type=range]::-webkit-slider-runnable-track{appearance:none;cursor:pointer;background:#464646;border-radius:50px;align-self:center;width:100%;height:8px;margin-left:-4px;margin-right:-4px;padding-top:4px;padding-bottom:4px}input[type=range]::-webkit-slider-container{appearance:none;cursor:pointer;background:#464646;border-radius:50px;align-self:center;width:100%;height:8px;padding:4px;background-color:#464646!important}#effort-slider::-webkit-slider-thumb{-webkit-appearance:none;background-color:#22e6e1;border:1px solid #22e6e1;border-radius:100%;width:24px;height:24px;transform:translate(-50%);box-shadow:inset 0 0 2px 2px #0009}#effort-slider::-webkit-slider-runnable-track{appearance:none;cursor:pointer;background:#464646;border-radius:50px;align-self:center;width:100%;height:8px;margin:-8px 4px}#image{object-fit:cover;transform-origin:50%;user-select:none;align-items:flex-start;width:100%;height:100%;transition:transform .12s;display:block}.image-pan-viewport{aspect-ratio:2;cursor:default;touch-action:none;background-color:#141414;border-radius:8px;width:896px;max-width:100%;position:relative;overflow:hidden}.image-pan-viewport.is-zoomed{cursor:grab}.image-pan-viewport.is-panning{cursor:grabbing}.image-pan-viewport.is-panning #image{transition:none}.image-slider-container{align-items:flex-start;display:flex}.visualizer-notes{max-width:70ch;margin-inline:auto}.tradeoff-chart{box-sizing:border-box;color:#e1e1e1;background-color:#191919;border:1px solid #dcdcdc38;border-radius:12px;width:min(896px,100%);margin-top:clamp(3rem,7vw,5rem);padding:clamp(1.25rem,3vw,2rem)}.tradeoff-chart-header{justify-content:space-between;align-items:flex-start;gap:1.5rem;margin-bottom:1.5rem;display:flex}.tradeoff-chart-kicker{color:#22e6e1;font-family:var(--font--font-family--barlow);letter-spacing:.12em;text-transform:uppercase;margin:0 0 .25rem;font-size:.75rem;font-weight:700}.tradeoff-chart-intro{color:#c5c5c5;margin:0;font-size:.9rem;line-height:1.45}.tradeoff-chart-controls{border:1px solid #dcdcdc4d;border-radius:999px;flex-shrink:0;display:inline-flex;overflow:hidden}.tradeoff-chart-toggle{color:#c5c5c5;min-height:36px;font-family:var(--font--font-family--barlow);cursor:pointer;background:0 0;border:0;padding:.375rem .75rem;font-size:.8125rem;font-weight:600}.tradeoff-chart-toggle+.tradeoff-chart-toggle{border-left:1px solid #dcdcdc4d}.tradeoff-chart-toggle.is-selected{color:#171717;background-color:#22e6e1}.tradeoff-chart-toggle:focus-visible{outline-offset:-3px;outline:2px solid #fff}.tradeoff-chart-svg{width:100%;height:auto;display:block;overflow:visible}.tradeoff-chart-svg .chart-grid{stroke:#dcdcdc29;stroke-width:1px}.tradeoff-chart-svg .chart-axis,.tradeoff-chart-svg .chart-tick{fill:#b8b8b8;font-family:var(--font--font-family--barlow);font-size:13px}.tradeoff-chart-svg .chart-axis{fill:#e1e1e1;font-size:14px;font-weight:600}.tradeoff-chart-svg .chart-line{fill:none;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.tradeoff-chart-svg .chart-line.is-muted{opacity:.3}.tradeoff-chart-svg .chart-line.is-selected{opacity:1}.tradeoff-chart-svg .chart-selection-guide{stroke:#ffffff73;stroke-dasharray:3 5;stroke-width:1px;vector-effect:non-scaling-stroke}.tradeoff-chart-svg .chart-comparison-marker{stroke:#191919;stroke-width:1.5px;vector-effect:non-scaling-stroke}.tradeoff-chart-svg .chart-marker-halo{fill:#191919;stroke:#fff;stroke-width:2px;vector-effect:non-scaling-stroke}.tradeoff-chart-legend{flex-wrap:wrap;gap:.5rem 1rem;margin-top:.5rem;display:flex}.tradeoff-chart-legend-item{color:#c5c5c5;font-family:var(--font--font-family--barlow);align-items:center;gap:.4rem;font-size:.8125rem;display:inline-flex}.tradeoff-chart-legend-item.is-selected{color:#fff;font-weight:700}.tradeoff-chart-legend-item.is-selected .tradeoff-chart-legend-swatch{height:4px}.tradeoff-chart-legend-swatch{border-radius:999px;width:1.2rem;height:2px}.tradeoff-chart-caption{color:#a9a9a9;margin:1rem 0 0;font-size:.8125rem;line-height:1.4}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.bottom-container{flex-direction:column;width:896px;margin:0;display:flex}.effort-slider-container{flex-direction:column;align-items:center;gap:18px;margin-top:-1rem;margin-left:1.5rem;display:flex}.vertical-control{flex-direction:column;align-items:center;gap:10px;display:flex}.vertical-slider-row{align-items:stretch;gap:10px;width:44px;display:flex}.effort-slider-container>.vertical-control:first-child .vertical-slider-row{gap:16px}.effort-slider-labels{height:300px;font-family:var(--font--font-family--barlow);text-transform:uppercase;color:#fff;flex-direction:column;justify-content:space-between;font-size:16px;font-weight:500;display:flex}.effort-slider-labels span{margin:2px 0;font-size:16px}#effort-slider{writing-mode:vertical-lr;vertical-align:middle;direction:rtl;background-color:#1f1f1f;width:8px;height:300px;transform:rotate(180deg)}.slider-container{flex-direction:column;align-items:center;width:896px;margin-top:10px;font-size:14px;display:flex}.slider-labels{width:100%;font-family:var(--font--font-family--barlow);text-transform:uppercase;color:#fff;justify-content:space-between;margin-top:1.25rem;font-size:12px;font-weight:500;display:flex}.slider-labels span{font-size:16px}.distance-label,.effort-label{font-family:var(--font--font-family--barlow);letter-spacing:-.02em;color:#fff;font-size:1.4rem;font-weight:600;line-height:1.25rem}.effort-label{align-items:flex-start;width:90px}.zoom-slider-container{margin-top:0}.zoom-label{font-family:var(--font--font-family--barlow);letter-spacing:-.01em;color:#fff;font-size:1rem;font-weight:600;line-height:1.25rem}#zoom-slider{writing-mode:vertical-lr;vertical-align:middle;direction:rtl;background-color:#1f1f1f;width:8px;height:76px}#zoom-slider::-webkit-slider-runnable-track{margin:-8px 4px}#zoom-slider::-webkit-slider-thumb{transform:translate(-50%)}.info{text-align:center;justify-content:space-between;width:896px;margin-top:20px;font-size:20px;display:flex}.info .label{color:var(--text--color--text-white);width:100%;font-family:var(--font--font-family--barlow);letter-spacing:.01rem;font-size:20px;font-weight:500}.info span{font-family:var(--font--font-family--barlow);letter-spacing:.01rem;color:var(--white);font-size:20px;font-weight:500}.no-smoothing{image-rendering:pixelated}@media (width>=768px){.image-slider-container{width:896px;max-width:100%;position:relative}.effort-slider-container{margin:0;position:absolute;top:-1rem;left:calc(100% + 1.5rem)}}@media (width<=767px){.code-distance_vs_effort .container{box-sizing:border-box;width:100%;padding-inline:1rem}#image-dropdown{align-self:stretch;width:100%;min-height:44px;margin-bottom:1rem;padding-inline:.75rem;font-size:1rem;left:auto}.image-slider-container{flex-direction:column;gap:1.5rem;width:100%}.image-pan-viewport,#image,.bottom-container,.slider-container,#slider,.info{box-sizing:border-box;width:100%;max-width:100%}.image-pan-viewport:not(.is-zoomed){touch-action:pan-y}.effort-slider-container{align-items:stretch;gap:1.5rem;width:100%;margin:0}.vertical-control,.vertical-slider-row{align-items:stretch;width:100%}.vertical-control{gap:.5rem}.vertical-slider-row,.effort-slider-container>.vertical-control:first-child .vertical-slider-row{flex-wrap:wrap;gap:.5rem}.effort-label,.zoom-label,.distance-label{width:auto;font-size:1.125rem;line-height:1.3}#effort-slider,#zoom-slider,#slider{writing-mode:horizontal-tb;direction:ltr;width:100%;height:44px;margin:0;transform:none}#effort-slider::-webkit-slider-runnable-track{margin:0 -4px}#zoom-slider::-webkit-slider-runnable-track{margin:0 -4px}#effort-slider::-webkit-slider-thumb{width:28px;height:28px;transform:translateY(-50%)}#zoom-slider::-webkit-slider-thumb{width:28px;height:28px;transform:translateY(-50%)}.effort-slider-labels{flex-direction:row;justify-content:space-between;width:100%;height:auto;font-size:.75rem}.effort-slider-labels span,.slider-labels span{margin:0;font-size:.75rem}.bottom-container{margin:0}.slider-container{align-items:stretch;margin-top:0}.slider-labels{margin-top:.5rem;font-size:.75rem}.info{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1rem;margin-top:1.5rem;font-size:.875rem;display:grid}.info p{overflow-wrap:anywhere;margin:0}.info .label,.info span{font-size:inherit}.tradeoff-chart{margin-top:3rem}.tradeoff-chart-header{flex-direction:column;gap:1rem}.tradeoff-chart-controls{width:100%}.tradeoff-chart-toggle{flex:1}.tradeoff-chart-svg .chart-tick{font-size:11px}.tradeoff-chart-svg .chart-axis{font-size:12px}}