:root{font-family:Arial,sans-serif;color:#17372b;background:#eef3f0;font-size:17px;line-height:1.6}*{box-sizing:border-box}body{margin:0}main{max-width:1280px;margin:auto;padding:24px}header{display:flex;gap:22px;align-items:center;border-bottom:4px solid #007a3d;padding:8px 0 20px}header img{width:95px;height:auto}h1{font-size:clamp(25px,3vw,38px);line-height:1.2;margin:4px 0}header p{margin:4px 0}a{color:#006e38}button,select{font:inherit;padding:10px 16px;border:1px solid #bdcec3;border-radius:7px;background:#fff;color:#163c2b;cursor:pointer;min-height:44px}button:disabled{opacity:.45;cursor:default}.primary{background:#007a3d;color:#fff;border-color:#007a3d}:focus-visible{outline:3px solid #dd9c05;outline-offset:3px}.links{display:flex;gap:22px;flex-wrap:wrap;padding:18px 0}.walkthrough{border:1px solid #d5e0d9;border-radius:16px;background:#fff;overflow:hidden}.controls{padding:18px;display:flex;align-items:end;gap:10px;flex-wrap:wrap}.controls label{margin-left:auto;font-size:14px;display:flex;flex-direction:column}select{max-width:280px}progress{display:block;width:100%;height:6px;accent-color:#007a3d;border:0}.stage{display:grid;grid-template-columns:38% 62%;min-height:620px}.copy{padding:30px;background:#f6f9f7}h2{font-size:29px;line-height:1.25;margin:12px 0 20px}#caption{font-size:19px;line-height:1.65}.eyebrow{font-weight:bold;letter-spacing:.1em;font-size:13px;color:#007a3d}.note{border-left:4px solid #d49908;padding:12px 16px;background:#fff9e9;font-size:16px}.demo,.meta{font-size:14px;color:#576d61}.demo{margin-top:28px}figure{height:620px;margin:0;padding:25px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff}#imageBox{display:block;position:relative;flex:none}#imageBox img{display:block;width:100%;height:100%;border:1px solid #d2ddd5}#highlight{position:absolute;border:3px solid #d59700;border-radius:5px;box-shadow:0 0 0 3px #fff9;pointer-events:none}#pointer{position:absolute;width:20px;height:20px;background:#007a3d;border:3px solid white;box-shadow:0 0 0 3px #007a3d55;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.playing #highlight{animation:focus 1.5s ease-in-out infinite}.playing #pointer{animation:point 1.5s ease-in-out infinite}.playing #flow .flow-node{animation:focus 2s infinite}.playing #flow .flow-node:nth-of-type(2){animation-delay:.4s}.playing #flow .flow-node:nth-of-type(3){animation-delay:.8s}.playing #flow .flow-node:nth-of-type(4){animation-delay:1.2s}@keyframes focus{50%{box-shadow:0 0 0 6px #d5970044}}@keyframes point{50%{transform:translate(-50%,-50%) scale(1.3)}}#flow{width:100%;max-width:410px;text-align:center}#flow>span{display:block;color:#557064;font-size:20px;margin:7px}.flow-node{border:2px solid #007a3d;border-radius:10px;padding:12px;font-weight:bold;background:#edf6f0}.flow-node small{display:block;font-size:16px;font-weight:normal}.flow-node.cloud{background:#173c30;color:#fff}details{margin:20px 0;background:white;border:1px solid #d5e0d9;border-radius:10px;padding:20px}summary{font-weight:bold;cursor:pointer}video{display:block;max-height:75vh;max-width:100%;margin:20px auto;background:#173c30}#transcript li{margin:20px 0}footer{padding:20px 0}.meta{margin-top:18px}[hidden]{display:none!important}@media(max-width:780px){main{padding:12px}header{gap:14px}header img{width:70px}.links{gap:12px}.stage{display:flex;flex-direction:column}.copy{padding:20px}h2{font-size:25px}#caption{font-size:18px}.demo{margin:14px 0 0}figure{height:500px;padding:16px}.controls{padding:12px}.controls label{margin:0;width:100%}select{max-width:100%;width:100%}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}