.monitor{background:#dcd5c6;color:var(--ink);padding-top:clamp(84px,8vw,128px);padding-bottom:clamp(92px,8vw,136px);border-color:rgba(20,33,42,.16)}
.monitor-intro,.monitor-workspace{max-width:1540px;margin-inline:auto}
.monitor-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.72fr);align-items:end;gap:clamp(35px,7vw,120px);margin-bottom:clamp(42px,5vw,70px)}
.monitor h2{margin:0;max-width:18ch;font-size:clamp(48px,5vw,76px);line-height:.98;color:var(--ink)}
.monitor h2 em{color:#9a642c;white-space:nowrap}
.monitor-intro .lead{margin:0 0 8px;max-width:520px;color:#4e6068;font-size:clamp(21px,2vw,29px);line-height:1.23}
.monitor-workspace{display:grid;grid-template-columns:minmax(290px,.7fr) minmax(0,1.3fr);gap:clamp(30px,4vw,66px);align-items:start}
.monitor-instructions{border-top:1px solid rgba(20,20,20,.3)}
.monitor-instructions-head,.monitor-instruction-top,.monitor-camera-top,.monitor-record-head{font-family:"Arial Narrow",Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.monitor-instructions-head{padding:17px 20px 9px;color:#4e6068}
.monitor-instruction{display:block;width:100%;margin:0;padding:24px 20px 27px;border:0;border-bottom:1px solid rgba(20,20,20,.2);border-left:2px solid transparent;background:transparent;color:#4e6068;text-align:left;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.monitor-instruction:hover,.monitor-instruction:focus-visible{background:rgba(0,0,0,.025);color:#202120}
.monitor-instruction:focus-visible{outline:2px solid #202120;outline-offset:3px}
.monitor-demo-footer button:focus-visible{outline:2px solid #f4f4f2;outline-offset:3px}
.monitor-instruction[aria-pressed="true"]{border-left-color:var(--amber);background:#e8e0d0;color:var(--ink)}
.monitor-instruction[aria-pressed="true"] .monitor-instruction-top,.monitor-instruction[aria-pressed="true"] .monitor-rule-line small{color:#9a642c}
.monitor-instruction-top{display:block;margin-bottom:13px;color:#4e6068}
.monitor-instruction-text{display:grid;gap:14px;max-width:490px;font-size:clamp(20px,1.7vw,25px);line-height:1.3;letter-spacing:-.035em}
.monitor-rule-line{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:start}
.monitor-rule-line small{padding-top:7px;color:#4e6068;font-family:"Arial Narrow",Arial,sans-serif;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.monitor-rule-action{padding-top:13px;border-top:1px solid rgba(20,33,42,.18);color:var(--ink)}
.monitor-instruction mark{padding:0;background:none;color:#9a642c;font-weight:700;text-decoration:none}
.monitor-demo{overflow:hidden;border:1px solid rgba(0,0,0,.32);background:#222423;color:#f4f4f2}
.monitor-camera-top{display:flex;align-items:center;justify-content:space-between;gap:15px;height:43px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.2);color:#e5e5e3;font-size:10px}
.monitor-camera-top>span{color:#b1b1b1}
.monitor-camera-separator{margin:0 6px;color:#8e8e8e}
.monitor-live-dot{display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--amber)}
.monitor-camera-viewport{position:relative;aspect-ratio:1672/941;min-height:260px;overflow:hidden;background:#181818}
.monitor-camera-viewport::after{position:absolute;inset:0;z-index:2;pointer-events:none;content:"";background:linear-gradient(180deg,rgba(0,0,0,.17),transparent 24%,transparent 70%,rgba(0,0,0,.25))}
.monitor-camera-frame{position:absolute;inset:0;transform:scale(1);transition:transform 1.25s cubic-bezier(.25,.8,.25,1);will-change:transform}
.monitor-demo[data-monitor-case="cart"]:is([data-monitor-phase="focus"],[data-monitor-phase="update"]) .monitor-camera-frame{transform:scale(1.9);transform-origin:66% 10%}
.monitor-demo[data-monitor-case="bin"]:is([data-monitor-phase="focus"],[data-monitor-phase="update"]) .monitor-camera-frame{transform:translate(6%,-10%) scale(1.85);transform-origin:23% 100%}
.monitor-camera-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.monitor-camera-layer.is-visible{opacity:1}
.monitor-target{position:absolute;z-index:1;display:block;border:2px solid var(--amber);background:rgba(211,160,82,.06);opacity:0;transition:opacity .35s}
.monitor-target span{position:absolute;left:-2px;bottom:calc(100% + 2px);display:block;padding:4px 6px;border:1px solid var(--amber);background:rgba(22,22,22,.92);color:#f0f0f0;white-space:nowrap;font-family:"Arial Narrow",Arial,sans-serif;font-size:8px;font-weight:700;letter-spacing:.1em}
.monitor-target-cart{left:55%;top:14%;width:19%;height:21%}
.monitor-target-cart span{left:auto;right:-1px}
.monitor-target-bin-before{left:20%;top:72%;width:10.5%;height:15%}
.monitor-target-bin-after{left:27%;top:83%;width:9%;height:14%}
.monitor-demo[data-monitor-case="cart"]:is([data-monitor-phase="focus"],[data-monitor-phase="update"]) .monitor-target-cart,.monitor-demo[data-monitor-case="bin"][data-monitor-phase="watch"] .monitor-target-bin-before,.monitor-demo[data-monitor-case="bin"]:is([data-monitor-phase="move"],[data-monitor-phase="focus"],[data-monitor-phase="update"],[data-monitor-phase="release"]) .monitor-target-bin-after{opacity:1}
.monitor-record{padding:19px 23px 21px;border-top:1px solid rgba(255,255,255,.2);background:#2b2b2b}
.monitor-record-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:15px;color:#c9c9c9}
.monitor-record-state{color:#adadad;font-size:10px}
.monitor-demo[data-monitor-phase="update"] .monitor-record-state,.monitor-demo[data-monitor-phase="release"] .monitor-record-state{color:var(--amber)}
.monitor-demo[data-monitor-phase="update"] [data-monitor-field-b],.monitor-demo[data-monitor-phase="release"] [data-monitor-field-b]{color:var(--amber)}
.monitor-record-fields{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:15px}
.monitor-record-fields>div{min-width:0;border-top:1px solid rgba(255,255,255,.2);padding-top:9px}
.monitor-record-fields span,.monitor-record-fields strong{display:block}
.monitor-record-fields span{margin-bottom:6px;color:#b8b8b8;font-size:11px}
.monitor-record-fields strong{font-size:clamp(16px,1.4vw,21px);font-weight:500;letter-spacing:-.035em;line-height:1.2}
.monitor-demo[data-monitor-phase="update"] [data-monitor-field-b]{animation:monitor-field-write .55s ease both}
@keyframes monitor-field-write{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.monitor-demo-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:11px 23px;border-top:1px solid rgba(255,255,255,.16);color:#c4c4c4;font-size:11px;line-height:1.35}
.monitor-demo-footer>div{display:flex;gap:12px;flex:none}
.monitor-demo-footer button{padding:4px 0;border:0;background:transparent;color:#eeeeee;cursor:pointer;font-size:11px}
.monitor-demo-footer button:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:1050px){.monitor-workspace{grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);gap:28px}.monitor-camera-viewport{min-height:225px}}
@media(max-width:800px){.monitor-intro,.monitor-workspace{grid-template-columns:1fr}.monitor-intro{gap:22px}.monitor-intro .lead{max-width:630px}.monitor-instruction-text{max-width:none}.monitor-demo{margin-top:4px}}
@media(max-width:550px){.monitor h2{font-size:clamp(40px,8.8vw,56px)}.monitor-instruction{padding:19px 16px 22px}.monitor-instruction-text{font-size:20px}.monitor-camera-top{height:39px;padding:0 11px;font-size:9px}.monitor-camera-viewport{min-height:0;aspect-ratio:1672/941}.monitor-record{padding:15px}.monitor-record-fields{gap:9px}.monitor-record-fields strong{font-size:15px}.monitor-demo-footer{padding:10px 15px}.monitor-target-bin-after span{left:0;right:auto;white-space:normal;width:90px}}
@media(prefers-reduced-motion:reduce){.monitor-camera-frame,.monitor-camera-layer,.monitor-target,.monitor-instruction{transition:none!important}.monitor-demo[data-monitor-phase="update"] [data-monitor-field-b]{animation:none!important}}