@font-face{font-family:NotoDemo;src:url('/fonts/noto-demo.ttf') format('truetype');font-weight:100 900;font-display:swap}
/* Operation layers preserve the reference layout until the user interacts. */
[hidden]{display:none!important}
button:focus-visible,a:focus-visible,input:focus-visible,[role=button]:focus-visible{outline:2px solid #111;outline-offset:3px}
.live-demo-trigger{position:absolute;left:52px;bottom:5px;z-index:4;padding:2px 0;background:white;border-bottom:1px solid #999;color:#111;font-size:12px;line-height:1.45;text-align:left}
.live-demo-trigger>span:first-child{font-size:10px;letter-spacing:1px;margin-right:12px}
.signal-launch{display:block;padding:0;margin-top:8px;background:white;font-size:12px;letter-spacing:.4px;border-bottom:1px solid #999}
.architecture-body-target{position:absolute;left:37.5%;top:4%;width:24%;height:50%;background:transparent;z-index:2}
.architecture-body-target span{opacity:0;position:absolute;bottom:0;right:0;padding:3px 7px;background:#f6ff00;font-size:12px}
.architecture-body-target:hover span,.architecture-body-target:focus-visible span{opacity:1}
.architecture-visual[data-active-part=body] .part-highlights [data-part=body]{opacity:1}
.defect h3{padding:0;position:relative}
.defect h3:before{display:none}
.defect-select{color:#fff;text-align:left;background:none;width:100%;height:45px;padding:8px 15px;font:inherit;white-space:nowrap}
.defect-select:before{content:'';display:inline-block;background:#f6ff00;width:3px;height:24px;vertical-align:middle;margin-right:17px}
.defect[data-selected=true]{outline:2px solid #e2eb00;outline-offset:-2px}
.defect[data-selected=true] .defect-select{color:#f6ff00}
.defect .inspection{cursor:pointer}
.comparison-controls{position:absolute;inset:0;touch-action:pan-y;--split:50%}
.compare-names{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;padding:6px 8px;font:9px/1.3 Arial,sans-serif;letter-spacing:.6px;pointer-events:none}
.compare-names span{background:#fff;color:#111;padding:3px 4px}
.compare-divider{position:absolute;top:0;bottom:22px;left:var(--split);border-left:1px solid white;pointer-events:none}
.compare-divider span{position:absolute;top:45%;transform:translateX(-50%);background:#fff;color:#111;width:27px;height:27px;display:grid;place-items:center;font-size:18px;border:1px solid #aaa}
.compare-range{position:absolute;left:10px;bottom:3px;width:calc(100% - 20px);height:17px;accent-color:#e0e900;cursor:ew-resize;margin:0;touch-action:pan-y}
.interaction-detail{border-block:1px solid #ddd;margin:0;padding:16px 52px;display:flex;gap:22px;align-items:center;background:#fafafa;font-size:13px}
.interaction-detail p{font-size:14px;margin:0}.interaction-detail>span{color:#666;font-size:12px}.interaction-detail .technical-button{margin-left:auto}
.process li[role=button]{cursor:pointer;outline-offset:-2px}
.process li[aria-expanded=true]{border-bottom:2px solid #e0e900}
.process li[aria-expanded=true] .step-number{color:#111}
.process-detail-number{font-size:32px!important;color:#111!important}
.process-detail h3{font-size:17px}.process-detail p{font-size:14px;line-height:1.7;margin-top:4px}
.mobile-system-launch{display:none!important}

.technical-button{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 14px;font-size:12px;background:#fff;color:#111;border:1px solid #888;white-space:normal;text-align:center;border-radius:0}
.technical-button,.interaction-detail,.live-demo-trigger,.part-description{font-family:NotoDemo,Noto,Arial,sans-serif}
.live-demo-trigger:disabled,.signal-launch:disabled{cursor:wait;color:#666}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Hero is quiet until invoked, and returns to exactly the same visual. */
.hero-inspection{position:absolute;inset:0;z-index:3;pointer-events:none;visibility:hidden}
.hero-inspection:not([data-step=idle]){visibility:visible}
.hero-inspection-geometry{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#e2eb00;stroke-width:1.5}
.hero-inspection-geometry>*{opacity:0}
.hero-inspection[data-step=camera] .hero-camera-outline,
.hero-inspection[data-step=camera] .hero-capture-area,
.hero-inspection[data-step=scan] .hero-capture-area,
.hero-inspection[data-step=detect] .hero-detection-mark,
.hero-inspection[data-step=judge] .hero-detection-mark,
.hero-inspection[data-step=output] .hero-detection-mark,
.hero-inspection[data-step=judge] .hero-judge-wire,
.hero-inspection[data-step=output] .hero-judge-wire,
.hero-inspection[data-step=output] .hero-output-wire{opacity:1}
.hero-inspection-band{display:none;position:absolute;top:79%;height:9%;width:5%;left:27%;background:rgba(227,237,0,.17);border-inline:1px solid #dce500}
.hero-inspection[data-step=scan] .hero-inspection-band{display:block;animation:inline-inspection-pass 1s linear both}
@keyframes inline-inspection-pass{from{left:24%}to{left:60%}}
.hero-enlargement{position:absolute;left:48%;top:47%;width:15%;height:22%;border:1px solid #edf700;background:#111;display:none}
.hero-enlargement svg{width:100%;height:100%;display:block}
.hero-enlargement>span{position:absolute;bottom:0;left:0;right:0;padding:3px;background:#f5ff00;font:9px/1.2 Arial,sans-serif;color:#111}
.hero-inspection[data-step=detect] .hero-enlargement,.hero-inspection[data-step=judge] .hero-enlargement,.hero-inspection[data-step=output] .hero-enlargement{display:block}
.hero-inspection-status{position:absolute;left:27%;bottom:8px;padding:5px 7px;background:rgba(255,255,255,.96);border-left:2px solid #e2eb00;font:10px/1.4 Arial,sans-serif;letter-spacing:.5px;display:flex;gap:9px;align-items:center;max-width:71%}
.hero-inspection-status b{font-size:11px}.hero-inspection-status small{font-size:8px;color:#777}
.hero[data-demo-step=camera] .annotation.camera strong{color:#797f00;text-decoration:underline;text-decoration-color:#e2eb00;text-underline-offset:3px}
.hero-judge-wire,.hero-output-wire{stroke-dasharray:8 3;animation:inline-signal-travel .6s linear infinite}
@keyframes inline-signal-travel{to{stroke-dashoffset:-22}}
/* The original diagram and labels are the controls, not a separate screen. */
.signal-status{display:block;min-height:0;font:10px/1.4 Arial,sans-serif;color:#555;margin-top:3px}
.signal-status:empty{display:none}
.inline-signal-lines{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#d6df00;stroke-width:1.5;pointer-events:none;z-index:1}
.inline-signal-lines path{opacity:0}
.inline-signal-lines [data-lit=true]{opacity:1;stroke-dasharray:6 3;animation:inline-signal-travel .6s linear infinite}
.architecture-components [data-muted=true]{opacity:.7}
.architecture-components>svg{transition:opacity 120ms ease}
.architecture-label{overflow:visible}
.part-description{position:absolute;left:0;top:100%;font-size:10px;line-height:1.4;white-space:nowrap;background:#fff;color:#555;padding:2px 0;border-top:1px solid #e2eb00;z-index:4}
.body-description{top:3px;left:38%;font-size:11px}
.architecture-hotspot{position:absolute;background:transparent;padding:0;z-index:2;border:0}
.architecture-label{z-index:3}
.architecture-body-target{top:4%;height:45%}
.architecture-body-target[aria-pressed=true] span{opacity:1}
.metric-settling strong{animation:inline-metric-settle .3s ease-out both;position:relative}
@keyframes inline-metric-settle{from{opacity:.88;top:3px}to{opacity:1;top:0}}
.mobile-architecture-mount{display:none}
@media(max-width:600px){
 .live-demo-trigger{left:14px;top:225px;bottom:auto;font-size:11px;line-height:1.15;padding:0;background:rgba(255,255,255,.94);height:24px;display:flex;flex-wrap:wrap;gap:1px;width:155px}
 .live-demo-trigger>span:first-child{width:100%;font-size:9px;letter-spacing:.7px;margin:0}
 .defect-select{font-size:18px;padding:8px 15px}.defect-select span{font-size:13px}
 .compare-names{font-size:8px}.compare-range{height:24px;bottom:2px}
 .interaction-detail{padding:15px 14px;display:flex;flex-wrap:wrap;gap:9px}.interaction-detail .technical-button{margin-left:0}
 .process-detail{align-items:flex-start}.process-detail>div{flex:1}.process-detail h3{font-size:15px}
 .line-integration{position:relative}.mobile-system-launch{display:inline-flex!important;position:absolute;right:14px;top:24px;width:128px;margin:0}
 .hero-inspection-geometry{display:none}
 .hero-inspection[data-step=camera]:before{content:'';position:absolute;left:36%;top:16%;width:15%;height:39%;border:1.5px solid #e2eb00}
 .hero-inspection[data-step=camera]:after,.hero-inspection[data-step=scan]:after{content:'';position:absolute;left:33%;top:80%;width:44%;height:9%;border:1px solid #e2eb00}
 .hero-inspection-band{top:80%;height:9%;width:8%}
 .hero-inspection[data-step=scan] .hero-inspection-band{animation:inline-mobile-inspection-pass 1s linear both}
 .hero-inspection[data-step=detect]:before,.hero-inspection[data-step=judge]:before,.hero-inspection[data-step=output]:before{content:'';position:absolute;left:51%;top:80%;width:14%;height:10%;border:1.5px solid #e2eb00}
 .hero-inspection[data-step=detect]:after,.hero-inspection[data-step=judge]:after,.hero-inspection[data-step=output]:after{content:'';position:absolute;left:57%;top:69%;height:12%;border-left:1px solid #e2eb00;transform:rotate(30deg);transform-origin:bottom}
 .hero-enlargement{left:55%;top:39%;width:25%;height:29%}.hero-enlargement>span{font-size:7px;padding:2px}
 .hero-inspection-status{left:33%;bottom:8px;max-width:65%;font-size:8px;gap:5px;flex-wrap:wrap;padding:3px 5px}.hero-inspection-status b{font-size:9px}.hero-inspection-status small{display:none}
 .hero-inspection[data-step=judge] .hero-enlargement,.hero-inspection[data-step=output] .hero-enlargement{border-bottom:3px solid #e2eb00}
 .hero-inspection[data-step=output] .hero-inspection-band{display:block;left:20%;width:62%;height:1px;top:89%;animation:none}
 .mobile-architecture-mount{display:block;margin-top:25px;border-top:1px solid #ccc;padding-top:14px}
 .mobile-architecture-toolbar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
 .mobile-architecture-toolbar .signal-launch{margin-top:0;font-size:11px}
 .mobile-architecture-toolbar>small{font:8px/1.4 Arial,sans-serif;color:#777}
 .mobile-architecture-mount .architecture-visual{display:block;position:relative;width:100%;height:auto;aspect-ratio:1078/480;min-height:165px}
 .mobile-architecture-mount .architecture-components,.mobile-architecture-mount .part-highlights,.mobile-architecture-mount .architecture-lines,.mobile-architecture-mount .inline-signal-lines{position:absolute;left:0;top:0;width:100%;height:100%}
 .mobile-architecture-mount .architecture-lines{display:none}
 .mobile-architecture-mount .architecture-label{display:none}
 .mobile-architecture-mount .architecture-body-target{left:37.5%;top:20%;height:30%}
 .mobile-architecture-mount .architecture-body-target span{display:none}
 .mobile-architecture-mount .body-description{display:none}
 .mobile-part-labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-block:1px solid #ddd;margin-top:8px}
 .mobile-part-labels button{padding:9px 3px;min-height:40px;font:10px/1.4 Arial,sans-serif;background:#fff;color:#111;border-bottom:2px solid transparent}
 .mobile-part-labels button[aria-pressed=true]{border-bottom-color:#dce500;font-weight:bold}
 .mobile-part-description{min-height:0;font:11px/1.6 NotoDemo,Noto,sans-serif;color:#555;margin-top:8px}
 .mobile-part-description:empty{display:none}
 .mobile-architecture-mount .signal-status{font-size:10px}
}
@keyframes inline-mobile-inspection-pass{from{left:33%}to{left:69%}}
@media(max-width:375px){.live-demo-trigger{top:214px}}
@media(prefers-reduced-motion:reduce){
 .hero-inspection-band,.hero-judge-wire,.hero-output-wire,.inline-signal-lines [data-lit=true],.metric-settling strong{animation:none!important}
 .hero-inspection[data-step=scan] .hero-inspection-band{left:33%;width:35%}
 .architecture-components>svg{transition:none}
}

.hero-mobile-signals{display:none;position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#e2eb00;stroke-width:1.5;pointer-events:none}
.hero-mobile-signals path{opacity:0}
@media(max-width:600px){.hero-mobile-signals{display:block}.hero-inspection[data-step=judge] .hero-mobile-signals .hero-judge-wire,.hero-inspection[data-step=output] .hero-mobile-signals path{opacity:1}}
.architecture > .section-copy{position:relative}
.architecture > .section-copy .signal-status{position:absolute;left:144px;bottom:12px;font-size:9px;margin:0}
.architecture-label.camera .part-description,.architecture-label.light .part-description{left:78px;top:calc(100% - 21px);font-size:9px;line-height:1.2;padding:2px 0;border-top:0;border-left:1px solid #e2eb00;padding-left:4px}
/* Quiet, consistent affordances; section geometry and product crops stay intact. */
.interaction-hint{font-family:NotoDemo,Noto,Arial,sans-serif;font-size:9px;line-height:1.4;color:#626262;letter-spacing:.25px}
.interaction-hint b{font-size:9px;font-weight:650;letter-spacing:.65px;margin-right:9px}
.touch-hint{display:none}
.live-demo-trigger{padding:1px 0;bottom:3px;min-height:22px;border-bottom-color:#777;transition:border-color .15s}
.live-demo-trigger>span:first-child{font-size:12px;letter-spacing:0;margin:0}
.hero-trigger-kicker{font:10px/1.4 Arial,sans-serif;letter-spacing:.9px;margin-right:12px}
.hero-trigger-kicker:before{content:'';display:inline-block;width:6px;height:6px;background:#e3ed00;margin-right:7px;vertical-align:1px;animation:inspection-dot 4.8s ease-in-out 2}
.run-hint{font:8px/1.3 Arial,sans-serif;letter-spacing:.5px;color:#555;margin-left:8px}
.hero-trigger-arrow{display:inline-block;transition:transform .15s}
.live-demo-trigger:hover,.live-demo-trigger:focus-visible{border-bottom-color:#111}
.live-demo-trigger:hover .hero-trigger-arrow{transform:translate(1px,-1px)}
.live-demo-trigger:disabled .hero-trigger-kicker:before{animation:none}
@keyframes inspection-dot{0%,100%{opacity:1}50%{opacity:.66}}
.hero-camera-outline{stroke-width:2.5}
.hero-detection-mark{stroke-width:2.4}
.hero-inspection-band{width:7%;height:12%;top:77.5%;background:rgba(227,237,0,.24)}
.hero-enlargement{left:48%;top:43%;width:18%;height:26%;border-width:2px}
.hero-enlargement>span{font-size:10px;padding:4px}
.hero-inspection-status{border-left-width:3px;font-size:11px;padding:6px 8px;gap:8px}
.hero-inspection-status b{font-size:12px}
.hero-step-index{font-size:10px;color:#555;font-variant-numeric:tabular-nums;white-space:nowrap}
.hero-progress{font-variant-numeric:tabular-nums;min-width:30px}
.hero-inspection-status .hero-ng{font-size:18px;font-weight:850;line-height:1;vertical-align:-1px}
.hero-judge-wire,.hero-output-wire{stroke-width:2.2}
.component-hint{position:absolute;left:0;top:0;margin:0;z-index:4;background:#fff}
.component-hint b{display:inline-block}
.signal-help{position:absolute;left:0;bottom:0;white-space:nowrap;font-size:8px}
.architecture-label:hover b,.architecture-label[aria-pressed=true] b{text-decoration:underline;text-decoration-color:#d5df00;text-underline-offset:4px;text-decoration-thickness:2px}
.architecture-label[aria-pressed=true] small{color:#313131}
.part-highlights{stroke-width:1.7}
.architecture > .section-copy .signal-status{bottom:10px}
.defect .inspection,.comparison-controls{cursor:ew-resize}
.comparison-hint{position:absolute;bottom:6px;right:7px;padding:3px 5px;background:rgba(255,255,255,.95);pointer-events:none;color:#111;z-index:1;text-align:right}
.comparison-hint b,.comparison-hint span{display:block;font:8px/1.35 Arial,sans-serif;letter-spacing:.45px;margin:0}
.comparison-hint b{font-weight:700}
.comparison-entry{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:30px;height:32px;border:1px solid #777;background:#fff;color:#111;font:20px Arial,sans-serif;cursor:ew-resize;z-index:2}
.comparison-entry:hover,.comparison-entry:focus-visible{border-color:#111;border-left:3px solid #e2eb00}
.defect[data-selected=true] .comparison-entry,.defect[data-selected=true] .comparison-hint{display:none}
.compare-divider{border-left:2px solid #fff}
.compare-divider span{width:32px;height:34px;border:1px solid #111;border-inline-width:2px;font-size:20px}
.comparison-controls:hover .compare-divider span{background:#f5ff00}
.process{position:relative}
.process-hint{position:absolute;left:calc(52px + 310px);top:0;margin:0;background:#fff;padding-right:8px}
.process li[aria-expanded=true] h3{ text-decoration:underline;text-decoration-color:#e2eb00;text-underline-offset:4px}
.mobile-component-hint{display:none}
@media(max-width:1100px) and (min-width:601px){.component-hint span{font-size:8px}.component-hint b{font-size:8px;margin-right:5px}.process-hint{left:calc(52px + 246px);font-size:8px}}
@media(max-width:600px){
 .pointer-hint{display:none}.touch-hint{display:inline}
 .live-demo-trigger{top:205px;height:44px;min-height:44px;width:185px;display:block;background:transparent;border:0;padding:0}
 .live-demo-trigger>span:first-child{position:absolute;bottom:0;left:0;width:185px;height:24px;margin:0;padding:0;border-bottom:1px solid #777;background:rgba(255,255,255,.96);font-size:11px;line-height:1.15;text-align:left}
 .hero-trigger-kicker{display:block;font-size:9px;line-height:1.2;letter-spacing:.5px;margin:0}
 .hero-trigger-kicker:before{width:5px;height:5px;margin-right:5px;vertical-align:0}
 .run-hint{font-size:7px;margin-left:6px}
 .live-demo-trigger:hover .hero-trigger-content,.live-demo-trigger:focus-visible .hero-trigger-content{border-bottom-color:#111}
 .hero-inspection[data-step=camera]:before{border-width:2.5px}
 .hero-inspection[data-step=detect]:before,.hero-inspection[data-step=judge]:before,.hero-inspection[data-step=output]:before{border-width:2.5px}
 .hero-inspection-band{width:11%;height:12%;top:78%;background:rgba(227,237,0,.24)}
 .hero-enlargement{left:55%;top:37%;width:28%;height:32%}
 .hero-enlargement>span{font-size:8px;padding:2px}
 .hero-inspection-status{left:32%;bottom:9px;max-width:67%;font-size:9px;gap:3px 6px;padding:4px 5px;display:flex;flex-wrap:wrap}
 .hero-inspection-status b{font-size:10px}.hero-step-index{font-size:8px}.hero-inspection-status .hero-ng{font-size:16px}
 .hero-inspection[data-step=judge] .hero-inspection-status{bottom:9px}
 .hero-mobile-signals{stroke-width:2px}
 .hero-inspection[data-step=output] .hero-inspection-band{height:2px;width:62%}
 .process-hint{left:14px;top:76px;font-size:8px}.process-hint b{font-size:8px}
 .mobile-component-hint{display:block;position:absolute;left:14px;top:69px;margin:0;font-size:8px}
 .mobile-component-hint b{font-size:8px;margin-right:5px}
 .mobile-diagram-hint{margin:10px 0 0}
 .mobile-architecture-toolbar>small{font-family:NotoDemo,Noto,Arial,sans-serif;text-align:right;font-size:8px}
 .mobile-part-labels button[aria-pressed=true]{background:#fbfcea}
 .comparison-entry{width:34px;height:36px}
 .comparison-hint b,.comparison-hint span{font-size:8px}
 .compare-divider span{width:34px;height:38px}
}
@media(max-width:375px){.live-demo-trigger{top:194px}}
@media(prefers-reduced-motion:reduce){.hero-trigger-kicker:before{animation:none}.hero-trigger-arrow,.live-demo-trigger{transition:none}}
.hero-trigger-kicker:before{border-radius:50%}
.defect .inspection{touch-action:pan-y}
@media(max-width:600px){.process-hint{top:124px}}
@media(max-width:600px){.mobile-architecture-mount .component-hint{display:none}.line-integration:has(.mobile-architecture-mount:not([hidden])) .mobile-component-hint{visibility:hidden}}
@media(max-width:600px){.mobile-component-hint{top:87px}}

@media(max-width:600px){.line-integration .section-copy{position:relative}.mobile-component-hint{left:0;top:calc(100% + 5px)}}