:root{color:#111;font-synthesis:none;background:#f3f2ec;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}*{box-sizing:border-box}html,body{width:100%;height:100%}body{margin:0}.site-info{z-index:10;font-size:11px;position:absolute;top:28px;right:28px}.site-info[open]{width:min(76ch,100% - 56px)}.site-info summary{color:#5d5d58;cursor:pointer;width:max-content;margin-left:auto;padding:12px 0 12px 12px}.site-info summary:focus-visible{outline-offset:4px;outline:2px solid #111}.test-guide{background:#f3f2ec;border:1px solid #dddcd5;max-height:calc(100dvh - 120px);margin-top:12px;padding:20px 24px;font-size:13px;line-height:1.7;overflow-y:auto}.test-guide h1,.test-guide h2{font-size:16px;font-weight:500;line-height:1.5}.test-guide h2{margin-top:32px}.test-guide p,.test-guide dd{color:#5d5d58}.test-guide dt{margin-top:20px}.test-guide dd{margin:4px 0 0}.test-guide a{color:inherit;text-underline-offset:4px}.test-guide a:focus-visible{outline-offset:4px;outline:2px solid}#app{width:100%;height:100%;min-height:240px;position:relative}#scene{width:100%;height:100%;display:block}#scene:focus{outline:none}@media (pointer:fine) and (hover:hover){#scene{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='4' fill='none' stroke='%230a0a0a' stroke-width='1.5'/%3E%3C/svg%3E") 10 10,auto}#scene.device-hover{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='6' fill='none' stroke='%230a0a0a' stroke-width='1.5'/%3E%3C/svg%3E") 10 10,pointer}#scene.pointer-pressed{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='4' fill='%230a0a0a'/%3E%3C/svg%3E") 10 10,auto}}@media (forced-colors:active){#scene,#scene.device-hover,#scene.pointer-pressed{cursor:auto}}.io-mark{width:44px;height:44px;color:inherit;place-items:center;display:grid}.io-mark svg{fill:none;stroke:currentColor;stroke-width:2px;width:32px;height:24px}.view-header{align-items:center;gap:16px;display:flex;position:absolute;top:28px;left:28px}#view-label{color:#5d5d58;font-size:11px}.overview-link{width:44px;height:44px;color:inherit;place-items:center;margin-left:8px;font-size:22px;text-decoration:none;display:grid}.overview-link:focus-visible{outline-offset:4px;outline:2px solid}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.compatibility-message{max-width:48ch;line-height:1.5;position:absolute;top:84px;left:24px;right:24px}.debug-camera{white-space:pre;color:#5d5d58;pointer-events:none;font-size:12px;position:absolute;bottom:24px;left:28px}.device-navigation{pointer-events:none;position:absolute;inset:0}.device-navigation button{appearance:none;font:inherit;clip-path:inset(50%);pointer-events:auto;border:0;width:1px;height:1px;position:absolute;overflow:hidden}.device-navigation button:focus-visible{clip-path:none;text-transform:capitalize;background:#f3f2ec;outline:2px solid #111;width:auto;height:auto;padding:10px 16px;top:84px;left:28px}.instrument{font-variant-numeric:tabular-nums;width:max-content;max-width:min(340px,100vw - 48px);font-size:12px;line-height:1.6;position:absolute;top:0;left:0}.annotation-connector{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.annotation-connector path{fill:none;stroke:#5d5d58;stroke-width:.75px}.motion-debug{background:#f3f2ec;max-width:min(600px,90vw);font-size:10px;position:absolute;bottom:18px;left:28px}.motion-debug pre{white-space:pre-wrap}.measurements{white-space:pre-wrap;background:#f3f2ec;min-height:1.6em;display:block}.test-controls{flex-wrap:wrap;align-items:center;gap:4px;margin-top:12px;display:flex}.test-controls button{appearance:none;font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;min-height:40px;padding:5px 9px}.test-controls .glyph-control{width:40px;padding:0;font-size:22px;line-height:1}.test-controls .glyph-control span{pointer-events:none}.semantic-choice{display:none}.inline-choice{max-width:220px;position:relative}.choice-trigger{white-space:nowrap;text-overflow:ellipsis;text-align:left;max-width:220px;overflow:hidden;border-bottom:1px solid #5d5d58!important}.choice-options{z-index:10;background:#f3f2ec;border:1px solid #111;min-width:100%;max-width:min(300px,100vw - 48px);max-height:35vh;padding:4px;position:absolute;bottom:calc(100% + 5px);left:0;overflow:auto}.choice-option{text-align:left;width:100%;display:block}.choice-option[aria-selected=true]{color:#f3f2ec;background:#111}.pattern-options{flex-wrap:wrap;gap:2px;display:flex}.test-controls .pattern-glyph{width:32px;min-height:36px;padding:0;font-size:19px}.pattern-glyph[aria-pressed=true]{color:#f3f2ec;background:#111}.pattern-rail{max-width:100%}.test-controls button:hover,.test-controls button[aria-pressed=true]{color:#f3f2ec;background:#111}.test-controls button:focus-visible,.test-controls select:focus-visible{outline-offset:3px;outline:2px solid #111}.choice-option:focus-visible{outline-offset:-2px}.test-message{color:#5d5d58;background:#f3f2ec;max-width:36ch;margin:10px 0 0;font-size:10px}[hidden]{display:none!important}.fullscreen-pattern{display:none}.fullscreen-pattern:fullscreen{object-fit:fill;background:#f3f2ec;width:100vw;height:100vh;display:block}.fallback-navigation{flex-wrap:wrap;gap:8px;max-width:calc(100vw - 56px);font-size:12px;display:flex;position:absolute;top:150px;left:28px}.fallback-navigation button{appearance:none;font:inherit;color:#111;text-transform:capitalize;background:#f3f2ec;border:1px solid #5d5d58;padding:8px 12px}.fallback-navigation button:focus-visible{outline-offset:3px;outline:2px solid #111}.fallback-navigation button[aria-pressed=true]{color:#f3f2ec;background:#111}.fallback-video{object-fit:contain;width:70%;height:38%;position:absolute;top:24%;left:15%}.test-controls button:disabled{opacity:.45;cursor:default}@media (width<=700px){.view-header{top:16px;left:16px}.instrument{font-size:11px}.device-navigation{flex-wrap:wrap;gap:8px;display:flex;inset:auto 16px 20px}.device-navigation button{clip-path:none;text-transform:capitalize;background:#f3f2ec;border:1px solid #5d5d58;width:auto;height:auto;padding:8px;position:static}}.camera-preview{background:#dddcd5;width:100%;height:clamp(180px,25vh,280px);position:relative}.camera-preview video{object-fit:contain;width:100%;height:100%;display:block}.preview-status{color:#5d5d58;place-items:center;font-size:22px;display:grid;position:absolute;inset:0}.camera-instrument .measurements{margin-top:12px}.monitor-fullscreen{background:#f3f2ec;display:none}.monitor-fullscreen:fullscreen{width:100vw;height:100vh;display:block;position:fixed;inset:0}.monitor-fullscreen canvas{width:100%;height:100%;image-rendering:pixelated;display:block}.fullscreen-controls{background:#f3f2ec;margin:0;padding:12px;font-size:12px;position:absolute;bottom:24px;left:24px;right:24px}.fullscreen-controls small{color:#5d5d58;flex-basis:100%}.controls-hidden{opacity:0}.controls-hidden:focus-within{opacity:1}@media (width<=700px){.camera-instrument{width:min(300px,100vw - 48px)}.camera-preview{height:min(22vh,170px)}.instrument{max-height:calc(100vh - 110px);overflow-y:auto}.fullscreen-controls{gap:4px;padding:8px;bottom:12px;left:12px;right:12px}.drafting-marks{display:none}}.indexed-controls{background:#f3f2ec;grid-template-columns:repeat(2,minmax(90px,1fr));gap:8px 14px;max-height:30vh;margin-top:12px;display:grid;overflow-y:auto}.indexed-observation{font-variant-numeric:tabular-nums;padding-bottom:4px;display:block;position:relative}.indexed-observation:after{content:"";width:var(--value);background:#5d5d58;height:1px;position:absolute;bottom:0;left:0}.indexed-controls:focus-visible{outline-offset:3px;outline:2px solid #111}.visual-debug{background:#f3f2ec;grid-template-columns:repeat(2,max-content);gap:5px 18px;padding:12px;font-size:10px;display:grid;position:absolute;bottom:24px;left:24px}.visual-debug label{align-items:center;gap:6px;display:flex}.instrument[data-device=keyboard]{width:max-content;max-width:calc(100vw - 64px)}.instrument[data-device=keyboard] .test-controls{position:absolute;bottom:0;left:calc(100vw - 150px)}.instrument[data-device=monitor]{width:calc(100vw - 64px);max-width:none}.instrument[data-device=monitor] .measurements{position:absolute;bottom:72vh;right:0}.instrument[data-device=monitor] .test-message{max-width:none}.camera-instrument{width:min(40vw,640px);max-width:calc(100vw - 48px)}.camera-preview{aspect-ratio:16/9;background:#dddcd5;height:auto}.camera-instrument .measurements{max-width:90%;margin:0;padding:0 5px;position:absolute;top:8px;right:10px}.camera-instrument .test-controls{margin-top:18px}@media (width<=799px){.camera-instrument{width:min(76vw,420px)}.instrument[data-device=keyboard] .test-controls{position:static}.instrument[data-device=monitor]{width:calc(100vw - 48px);max-width:calc(100vw - 48px)}.instrument[data-device=monitor] .measurements{position:static}.camera-preview{height:auto}}@media (prefers-reduced-motion:reduce){.camera-preview{transition:none}}.camera-preview:not([data-state=live]) .preview-status{color:#5d5d58}.drafting-marks{pointer-events:none;opacity:.28;position:absolute;inset:104px 28px 28px}.overview-field{pointer-events:none;fill:none;stroke:#73736b;stroke-width:.7px;width:100%;height:100%;position:absolute;inset:0;overflow:hidden}.overview-construction{opacity:.28}.overview-grid{opacity:.1}.overview-radial,.overview-device-field{opacity:.1;transition:opacity .16s ease-out}.overview-radial.is-active,.overview-device-field.is-active{opacity:.52}.overview-optical{opacity:.52;stroke-width:.7px}.overview-callout{stroke:#67675f;stroke-width:.8px;opacity:.65}.overview-leader{stroke-dasharray:1;stroke-dashoffset:0;animation:.16s ease-out overview-line}.overview-hover-bridge{stroke:#0000;stroke-width:18px;pointer-events:stroke}.overview-label{appearance:none;text-align:left;color:#67675f;cursor:pointer;background:0 0;border:0;width:100px;height:36px;padding:8px;font:11px ui-monospace,monospace;animation:.14s ease-out overview-label;position:absolute}.overview-label:focus-visible{outline-offset:2px;outline:1px solid}@keyframes overview-line{0%{stroke-dashoffset:1px}}@keyframes overview-label{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.overview-leader,.overview-label{animation:none}.overview-radial,.overview-device-field{transition:none}}.overview-callout text{fill:#67675f;stroke:none;font-family:inherit;font-size:10px}.overview-callout circle{fill:#77776f;stroke:none}.registration{pointer-events:none;border-color:#5d5d58;width:10px;height:10px;position:absolute}.corner-0{border-top:1px solid;border-left:1px solid;top:0;left:0}.corner-1{border-top:1px solid;border-right:1px solid;top:0;right:0}.corner-2{border-bottom:1px solid;border-left:1px solid;bottom:0;left:0}.corner-3{border-bottom:1px solid;border-right:1px solid;bottom:0;right:0}.camera-preview .registration{opacity:.6}.camera-instrument .measurements{z-index:2;font-size:10px}.camera-guides{z-index:1;pointer-events:none;opacity:.35;background:linear-gradient(90deg,#0000 calc(33.333% - .5px),#fcfcf8 calc(33.333% - .5px) calc(33.333% + .5px),#0000 calc(33.333% + .5px) calc(66.667% - .5px),#fcfcf8 calc(66.667% - .5px) calc(66.667% + .5px),#0000 calc(66.667% + .5px)),linear-gradient(#0000 calc(33.333% - .5px),#fcfcf8 calc(33.333% - .5px) calc(33.333% + .5px),#0000 calc(33.333% + .5px) calc(66.667% - .5px),#fcfcf8 calc(66.667% - .5px) calc(66.667% + .5px),#0000 calc(66.667% + .5px));position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.camera-guides:before,.camera-guides:after{content:"";background:#fcfcf8;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.camera-guides:before{width:12px;height:1px}.camera-guides:after{width:1px;height:12px}