:root{--ground:#f5f5f3;--surface:#fff;--surface-2:#eceeeb;--ink:#16191a;--muted:#5a625e;--rule:#d5d9d6;--rule-strong:#a9b0ac;--accent:#2f6a8f;--accent-ink:#fff;--accent-soft:#e4ecf1;--warn-bg:#fff4d6;--warn-border:#e0b400;--warn-text:#5c4300;--error:#b42318;--font:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--bench:1120px;--pad:clamp(16px, 4vw, 40px);--corner:6px;--bracket:16px;--ease:cubic-bezier(.2, .8, .2, 1);--ease-out:cubic-bezier(.4, 0, 1, 1);--dur-micro:.14s;--dur-ui:.22s;--dur-enter:.42s;--stagger:60ms}@media (prefers-color-scheme:dark){:root{--ground:#101312;--surface:#191d1c;--surface-2:#212725;--ink:#e9eceb;--muted:#9aa4a0;--rule:#2b312f;--rule-strong:#4a534f;--accent:#7fb8d8;--accent-ink:#0b1418;--accent-soft:#1b2429;--warn-bg:#3a2f08;--warn-border:#b89400;--warn-text:#ffe9a3;--error:#ff8a80}}*,:before,:after{box-sizing:border-box}html{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){html{--lightningcss-light: ;--lightningcss-dark:initial}}body{background:var(--ground);color:var(--ink);font-family:var(--font);-webkit-text-size-adjust:100%;margin:0;font-size:16px;line-height:1.5}a{color:var(--accent);text-underline-offset:2px}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.skip-link{z-index:10;background:var(--accent);color:var(--accent-ink);padding:10px 16px;font-weight:600;text-decoration:none;position:absolute;top:-64px;left:12px}.skip-link:focus{top:12px}.bench{isolation:isolate;width:min(100%, var(--bench));padding:clamp(28px, 6vw, 64px) var(--pad) 56px;margin-inline-start:auto;margin-inline-end:auto;position:relative}.bench:before,.bench:after{content:"";z-index:-1;background:var(--rule);pointer-events:none;width:1px;position:absolute;top:0;bottom:0}.bench:before{left:calc(var(--pad) / 2)}.bench:after{right:calc(var(--pad) / 2)}@media (max-width:560px){.bench:before,.bench:after{display:none}}.masthead{padding-bottom:20px}h1{letter-spacing:-.02em;margin:0;font-size:clamp(2rem,5vw,3rem);font-weight:650;line-height:1.06}.provenance{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:10px 0 0;font-size:.6875rem}.lede{max-width:62ch;color:var(--muted);margin:14px 0 0}h2{letter-spacing:-.01em;margin:0 0 12px;font-size:1.0625rem;font-weight:650}h3{margin:0 0 10px;font-size:1rem;font-weight:650}.strip{border-top:1px solid var(--rule);background:linear-gradient(var(--rule-strong), var(--rule-strong)) left top / var(--corner) var(--corner) no-repeat, linear-gradient(var(--rule-strong), var(--rule-strong)) right top / var(--corner) var(--corner) no-repeat;outline:none;padding:20px 0 4px;position:relative}.strip-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.strip-divider{background:var(--rule);align-self:stretch;width:1px;min-height:28px;margin:0 6px}.samples-label{color:var(--muted);font-size:.9375rem}.samples{flex-wrap:wrap;gap:8px;min-width:0;display:flex}.strip-rule{background:var(--rule);height:1px;margin:16px 0 0;position:relative;overflow:hidden;container-type:inline-size}.strip-rule-run{background:var(--accent);width:88px;display:none;position:absolute;top:0;bottom:0}@supports (width:100cqw){.strip.is-working .strip-rule-run{animation:rule-run 1.2s var(--ease) infinite;display:block}}@keyframes rule-run{0%{transform:translate(-88px)}to{transform:translate(calc(100cqw + 88px))}}.hint,.status{color:var(--muted);margin:12px 0 0;font-size:.875rem}.status{font-family:var(--mono);font-size:.8125rem}.status[data-kind=error]{color:var(--error)}.button{border:1px solid var(--rule-strong);background:var(--surface);min-height:44px;color:var(--ink);font:inherit;cursor:pointer;transition:background-color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);border-radius:2px;justify-content:center;align-items:center;padding:10px 16px;font-size:.9375rem;font-weight:600;display:inline-flex;position:relative}.button:hover{background:var(--surface-2);border-color:var(--accent)}.button:active{transform:translateY(1px)}.button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.button.primary:hover{background:var(--accent);filter:brightness(1.08)}.button input[type=file]{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0}.button:disabled{opacity:.5;cursor:wait}.button:has(input:disabled){opacity:.5;cursor:wait}.button:has(input:disabled) input[type=file]{cursor:wait}.button.small{min-height:40px;padding:8px 14px;font-size:.875rem}.results{transition:opacity var(--dur-ui) var(--ease-out);outline:none;margin-top:28px}.results.stale{opacity:.45}.warnings{background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-text);margin-bottom:20px;padding:10px 14px;font-size:.9375rem}.warnings p{margin:0}.warnings p+p{margin-top:6px}.band{border-top:1px solid var(--rule);padding:22px 0}.band-label{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 16px;font-size:.6875rem}.readout{flex-wrap:wrap;align-items:baseline;gap:0 14px;display:flex}.percent{font-family:var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);margin:0;font-size:clamp(48px,7vw,76px);font-weight:600;line-height:1}.percent .unit{color:var(--muted);margin-left:2px;font-size:.5em}.readout-label{color:var(--muted);margin:0;font-size:1rem}.definition{max-width:64ch;color:var(--muted);margin:14px 0 0;font-size:.9375rem}.details{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:22px 0 0;display:grid}.details div{border-right:1px solid var(--rule);padding:12px 16px 12px 0}.details div:last-child{border-right:0}.details div+div{padding-left:16px}.details dt{font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-size:.6875rem;font-weight:400}.details dd{font-family:var(--mono);font-variant-numeric:tabular-nums;margin:4px 0 0;font-size:.9375rem}.explain{color:var(--muted);max-width:72ch;margin:16px 0 0;font-size:.875rem}.explain summary{cursor:pointer;color:var(--accent);padding:4px 0;font-weight:600}.explain dl{gap:8px;margin:10px 0 0;display:grid}.explain dl div{grid-template-columns:minmax(120px,11rem) 1fr;gap:12px;display:grid}.explain dt{font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink);font-size:.75rem}.explain dd{margin:0}.actions{flex-wrap:wrap;gap:8px;margin-top:18px;display:flex}.figure-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;display:grid}.figure-pair figure{min-width:0;margin:0}.frame{border:1px solid var(--rule);background:linear-gradient(var(--rule-strong), var(--rule-strong)) left top / var(--bracket) 1px no-repeat, linear-gradient(var(--rule-strong), var(--rule-strong)) left top / 1px var(--bracket) no-repeat, linear-gradient(var(--rule-strong), var(--rule-strong)) right top / var(--bracket) 1px no-repeat, linear-gradient(var(--rule-strong), var(--rule-strong)) right top / 1px var(--bracket) no-repeat, linear-gradient(var(--rule-strong), var(--rule-strong)) left bottom / var(--bracket) 1px no-repeat, linear-gradient(var(--rule-strong), var(--rule-strong)) left bottom / 1px var(--bracket) no-repeat, linear-gradient(var(--rule-strong), var(--rule-strong)) right bottom / var(--bracket) 1px no-repeat, linear-gradient(var(--rule-strong), var(--rule-strong)) right bottom / 1px var(--bracket) no-repeat, var(--surface-2);place-items:center;padding:10px;display:grid;position:relative}.frame canvas{background:#000;grid-area:1/1;width:auto;max-width:100%;height:auto;max-height:68vh;display:block}.frame canvas[style*=pixelated]{width:100%}.frame-stack .beneath{z-index:0}.frame-stack #overlay-canvas{z-index:1}.is-in .frame-stack #overlay-canvas{animation:overlay-land var(--dur-enter) var(--ease) both}@keyframes overlay-land{0%{opacity:0}to{opacity:1}}figcaption{border-top:1px solid var(--rule);color:var(--muted);margin-top:10px;padding-top:8px;font-size:.875rem}.scale{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--muted);margin-top:4px;font-size:.75rem;display:block}.scale:empty{display:none}.reference-table{border-collapse:collapse;width:min(100%,520px);font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.875rem}.reference-table caption{caption-side:top;text-align:left;font-family:var(--font);color:var(--muted);max-width:64ch;padding-bottom:12px;font-size:.9375rem}.reference-table th,.reference-table td{text-align:left;border-bottom:1px solid var(--rule);padding:9px 16px 9px 0}.reference-table thead th{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom-color:var(--rule-strong);font-size:.6875rem;font-weight:400}.reference-table tbody th{font-family:var(--font);color:var(--ink);font-weight:500}.reference-table td{color:var(--ink)}.caveat{max-width:70ch;color:var(--muted);margin:14px 0 0;font-size:.9375rem}.how{border-top:1px solid var(--rule);background:linear-gradient(var(--rule-strong), var(--rule-strong)) left top / var(--corner) var(--corner) no-repeat, linear-gradient(var(--rule-strong), var(--rule-strong)) right top / var(--corner) var(--corner) no-repeat;margin-top:28px;padding-top:22px;position:relative}.method{max-width:76ch;margin:0 0 18px;padding:0;list-style:none}.method li{border-bottom:1px solid var(--rule);grid-template-columns:3.25rem 1fr;align-items:baseline;gap:0;padding:10px 0;font-size:1rem;line-height:1.55;display:grid}.method li:first-child{border-top:1px solid var(--rule)}.step-no{font-family:var(--mono);letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums;font-size:.75rem}.agreement{max-width:76ch;color:var(--muted);margin:0;font-size:.9375rem}.footer{border-top:1px solid var(--rule);color:var(--muted);margin-top:36px;padding-top:18px;font-size:.8125rem}.footer p{max-width:80ch;margin:0}.reveal,.band{animation:rise-in var(--dur-enter) var(--ease) both;animation-delay:calc(var(--reveal-index,0) * var(--stagger))}@keyframes rise-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.word-mask{vertical-align:top;margin-bottom:-.14em;padding-bottom:.14em;display:inline-block;overflow:hidden}.word{animation:word-rise .8s var(--ease) both;animation-delay:calc(var(--reveal-index,0) * 45ms);will-change:transform;display:inline-block}@keyframes word-rise{0%{transform:translateY(110%)}to{transform:translateY(0)}}@media print{.reveal,.band,.word{opacity:1;animation:none;transform:none}}@media (prefers-reduced-motion:reduce){.reveal,.band,.word,.is-in .frame-stack #overlay-canvas{opacity:1;animation:none;transform:none}.strip.is-working .strip-rule-run,.strip-rule-run{animation:none;display:none}.button,.results{transition:none}.button:active{background:var(--surface-2);transform:none}html{scroll-behavior:auto}}@media (max-width:760px){.figure-pair{grid-template-columns:1fr}.frame canvas{max-height:52vh}}@media (max-width:640px){.strip-divider{display:none}.samples-label{flex-basis:100%;margin-top:6px}.samples{flex-basis:100%}.samples .button{flex:0 auto;min-width:0}.details{grid-template-columns:repeat(2,minmax(0,1fr))}.details div:nth-child(2){border-right:0}.details div:nth-child(-n+2){border-bottom:1px solid var(--rule)}.details div:nth-child(odd){padding-left:0}.percent{font-size:48px}.explain dl div{grid-template-columns:1fr;gap:2px}.method li{grid-template-columns:2.75rem 1fr}}
