:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--gap:1rem;--rule:color-mix(in srgb, currentColor 20%, transparent);--void:color-mix(in srgb, currentColor 48%, transparent);--plot:5rem;--grip:.9rem;--thumb:.8rem}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}body{max-width:40rem;margin:0 auto;padding:2rem 1.5rem;font:1rem/1.5 system-ui,sans-serif}body:has(.wizard-layout){max-width:62rem}nav[data-stage-nav]{flex-wrap:wrap;gap:.5rem;margin-block-start:1.5rem;display:flex}nav[data-stage-nav] button[aria-current=step],nav[data-utility-nav] button[aria-expanded=true]{font-weight:600;text-decoration:underline}.stage-marker{vertical-align:.35em;margin-inline-start:.4em;font-size:.55em}nav[data-utility-nav]{border-block-start:1px solid var(--rule);margin-block-start:.75rem;padding-block-start:.75rem;display:flex}.hint-action{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0;text-decoration:underline}.wizard-layout{gap:var(--gap) 2rem;flex-wrap:wrap;align-items:flex-start;display:flex;container:wizard-layout/inline-size}.wizard-layout>[data-preview-pane]{flex:16rem}.wizard-layout>[data-stage-panels]{flex:2 24rem}@container wizard-layout (width>=42rem){.wizard-layout>[data-preview-pane]{position:sticky;top:1rem}}@container wizard-layout (width<42rem){.cutout>canvas,.viewport>canvas{max-block-size:min(18rem,40vh)}}.wizard-nav{justify-content:space-between;margin-block-start:1.5rem;display:flex}section{border-block-start:1px solid var(--rule);margin-block-start:2.5rem;padding-block-start:1rem}button{font:inherit;padding:.5rem 1rem}[role=status]{min-height:1.5em}.field{align-items:center;gap:.5rem var(--gap);flex-wrap:wrap;display:flex}.field>label{flex-basis:100%;font-weight:600}.field>input[type=range]{flex:12rem}.field>select{font:inherit;padding:.35rem .5rem}.field>output{font-variant-numeric:tabular-nums;min-width:3ch}.hint{opacity:.75;flex-basis:100%;font-size:.875rem}.cutout{margin:var(--gap) 0}.cutout>canvas{border:1px solid var(--rule);max-width:100%;height:auto;display:block}.cutout>canvas,.viewport>canvas{background-color:canvas;background-image:conic-gradient(from 90deg, var(--void) 25%, #0000 0 50%, var(--void) 0 75%, #0000 0);background-size:1.5rem 1.5rem}.cutout>figcaption{opacity:.75;margin-block-start:.5rem;font-size:.875rem}.histogram{margin:var(--gap) 0;padding-block-start:var(--grip);position:relative}.histogram>canvas{width:100%;height:var(--plot);border:1px solid var(--rule);background-color:canvas;display:block}.histogram>[data-cuts]{height:calc(var(--grip) + var(--plot));top:0;inset-inline:calc(var(--thumb) / -2);position:absolute}.histogram input[type=range]{appearance:none;pointer-events:none;background:0 0;width:100%;height:100%;margin:0;position:absolute;inset:0}.histogram input[type=range]::-webkit-slider-thumb{appearance:none;pointer-events:auto;cursor:ew-resize;width:var(--thumb);height:calc(var(--grip) + var(--plot));background:linear-gradient(currentColor, currentColor) center top / 100% var(--grip) no-repeat, linear-gradient(currentColor, currentColor) center top / 2px 100% no-repeat;filter:drop-shadow(0 0 1px canvas)drop-shadow(0 0 2px canvas);border:0;border-radius:.2rem}.histogram input[type=range]::-moz-range-thumb{pointer-events:auto;cursor:ew-resize;width:var(--thumb);height:calc(var(--grip) + var(--plot));background:linear-gradient(currentColor, currentColor) center top / 100% var(--grip) no-repeat, linear-gradient(currentColor, currentColor) center top / 2px 100% no-repeat;filter:drop-shadow(0 0 1px canvas)drop-shadow(0 0 2px canvas);border:0;border-radius:.2rem}.histogram>figcaption{opacity:.75;margin-block-start:.5rem;font-size:.875rem}.swatches{margin:var(--gap) 0;gap:.5rem var(--gap);padding:0;list-style:none;display:grid}.swatches>li{align-items:center;gap:.5rem var(--gap);flex-wrap:wrap;display:flex}.swatches label{flex:14rem}.swatches input[type=color]{block-size:2rem;inline-size:3rem}.auto-fix{border:1px solid var(--rule);border-radius:.4rem;margin-block-start:1.25rem;padding:.75rem .9rem}.auto-fix>h3{margin-block:0 .25rem;font-size:1rem}.auto-fix>.hint{margin-block:0 .5rem}.auto-fix>.choice+.choice{border-block-start:1px solid var(--rule);margin-block-start:.75rem;padding-block-start:.75rem}.choice>.hint{margin-block:.15rem 0}.switch{inline-size:100%;font:inherit;color:inherit;text-align:start;cursor:pointer;background:0 0;border:0;align-items:center;gap:.6rem;padding:.25rem 0;display:flex}.switch>.track{border:2px solid;border-radius:1rem;flex:none;block-size:1.35rem;inline-size:2.4rem;position:relative}.switch>.track:before{content:"";border:.375rem solid;border-radius:50%;block-size:.75rem;inline-size:.75rem;position:absolute;inset-block-start:.15rem;inset-inline-start:.15rem}.switch[aria-checked=true]>.track:before{inset-inline-start:1.05rem}.switch[aria-checked=false]>.track{border-style:dashed}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.viewport{margin:var(--gap) 0}.viewport>canvas{border:1px solid var(--rule);touch-action:none;block-size:11rem;inline-size:100%;display:block}.viewport[data-expanded]>canvas{block-size:min(26rem,60vh)}.viewport[data-pending]>canvas,.viewport[data-stale]>canvas,.cutout[data-pending]>canvas,.cutout[data-stale]>canvas{opacity:.55}.cutout,.viewport{position:relative}.busy-marker{border:1px solid var(--rule);background-color:canvas;border-radius:1rem;align-items:center;gap:.4rem;margin:0;padding:.15rem .5rem;font-size:.8125rem;line-height:1.4;display:none;position:absolute;inset-block-start:.5rem;inset-inline-start:.5rem}.busy-marker[data-busy]{display:flex}@container wizard-layout (width<42rem){.busy-marker>span{display:none}}.busy-marker:before{content:"";clip-path:polygon(0 0,50% 0,50% 50%,100% 50%,100% 100%,0 100%);border:2px solid;border-radius:50%;block-size:.75rem;inline-size:.75rem;animation:.9s linear infinite busy-turn}@media (prefers-reduced-motion:reduce){.busy-marker:before{animation:none}}@keyframes busy-turn{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.readout[data-pending],.readout[data-stale],.spec-line[data-stale],[data-handoff][data-stale]{border-inline-start:2px solid var(--rule);padding-inline-start:.5rem}.output{margin-block-start:1.5rem}.output>h3{margin-block:0 .5rem;font-size:1rem}.spec-line{font-variant-numeric:tabular-nums;margin-block:0 .5rem}.pending-note{margin-block:.25rem 0;font-size:.875rem}.card-jump,.viewport-note{margin-block:.5rem 0;font-size:.875rem}.viewport-actions{gap:.5rem;margin-block:.5rem 0;display:flex}.viewport>figcaption{margin-block-start:.5rem}:focus-visible{outline-offset:2px;outline:2px solid}.histogram input[type=range]:focus-visible::-webkit-slider-thumb{outline-offset:2px;outline:2px solid}body>footer{border-block-start:1px solid var(--rule);margin-block-start:3rem;padding-block-start:1rem;font-size:.9rem}