.scan-experience{background:#fff;scroll-margin-top:90px}.scan-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;margin-bottom:40px}.scan-heading .eyebrow{color:var(--red)}.scan-heading h2{font:700 58px/1.01 var(--head);margin-top:20px}.scan-heading>p{max-width:370px;color:#757773;font-size:16px;line-height:1.85;margin-bottom:3px}.scan-shell{border:1px solid #e3e4e0;border-radius:20px;overflow:hidden;background:#f5f6f3}.scan-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;border-bottom:1px solid #e4e6df;background:#fff}.scan-scenario-tabs{display:flex;gap:4px;background:#f0f1ee;border-radius:30px;padding:5px}.scan-scenario-tabs>button{border-radius:24px;padding:11px 18px;font-size:13px;color:#74786f;white-space:nowrap}.scan-scenario-tabs>button.active{background:#24392f;color:#fff;box-shadow:0 2px 5px #0001}.scan-demo-label{font-size:9px;letter-spacing:1.2px;color:#7a8076;display:flex;align-items:center;gap:8px;white-space:nowrap}.scan-demo-label i{width:5px;height:5px;border-radius:50%;background:#889477}.scan-workspace{display:grid;grid-template-columns:minmax(0,1fr) 276px}.scan-viewport{height:570px;position:relative;background:radial-gradient(ellipse at 50% 40%,#fafbf8,#e9ede5);overflow:hidden}.scan-viewport canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y}.scan-viewport canvas.dragging{cursor:grabbing}.scan-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:13px;font-size:13px;background:#f1f3ec}.scan-loading[hidden]{display:none}.scan-loading>span{width:16px;height:16px;border:2px solid #c6d0bf;border-top-color:#355443;border-radius:50%;animation:scan-spin 1s linear infinite}@keyframes scan-spin{to{transform:rotate(360deg)}}.scan-view-controls{position:absolute;left:22px;top:19px;display:flex;gap:4px;padding:4px;background:#ffffffbc;border:1px solid #fff;border-radius:24px;backdrop-filter:blur(10px)}.scan-view-controls>button{font-size:10px;padding:8px 12px;color:#767c71;border-radius:18px}.scan-view-controls>button.active{background:#e5eadf;color:#314032}.scan-viewport-bottom{position:absolute;bottom:20px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#71796b;gap:15px;pointer-events:none}.scan-viewport-bottom>label{pointer-events:auto;display:flex;align-items:center;gap:8px;padding:10px 13px;background:#ffffffe0;border-radius:20px;border:1px solid #fff}.scan-viewport-bottom input{accent-color:#3d604b;width:13px;height:13px}.scan-analysis{background:#fff;border-left:1px solid #e3e4e0;padding:35px 25px;display:flex;flex-direction:column;position:relative}.scan-overline{font-size:9px;letter-spacing:1.5px;color:#858b80}.scan-scenario-number{font:500 67px/1 var(--head);color:#e0e5db;margin:25px 0 12px}.scan-analysis h3{font:600 32px/1 var(--head);margin:0 0 16px}.scan-analysis>p{font-size:13px;line-height:1.8;color:#777e70}.scan-results{margin:25px 0 23px;display:flex;flex-direction:column;gap:15px}.scan-results>div{display:grid;grid-template-columns:7px 1fr auto;align-items:center;gap:8px;font-size:11px}.scan-results i{height:5px;width:5px;border-radius:50%;background:#d7dcd0}.scan-results b{font-weight:400;font-size:10px;color:#9a9f94}.scan-results .found i{background:#359a75;box-shadow:0 0 0 3px #359a7515}.scan-results .found b{color:#358465}.scan-legend{margin-top:auto;padding-top:24px;border-top:1px solid #e7e9e3;display:grid;gap:10px}.scan-legend>span{display:flex;align-items:center;gap:8px;font-size:10px;color:#7c8475}.scan-legend i{width:12px;height:3px;background:#60b898}.scan-legend .legend-void{background:#b9a272}.scan-analysis>.scan-explainer{font-size:10px;line-height:1.6;margin:18px 0 0;color:#9a9f94}.scan-console{padding:23px 27px;display:flex;align-items:center;gap:28px;border-top:1px solid #e0e4d9;background:#fff}.scan-play{background:#294636;color:#fff;padding:17px 21px;border-radius:6px;font-size:11px;font-weight:600;min-width:200px;display:flex;align-items:center;justify-content:center;gap:13px;white-space:nowrap}.scan-play:hover{background:#345a46}.scan-play>span{font-size:12px}.scan-timeline{flex:1;min-width:80px}.scan-timeline>div{display:flex;justify-content:space-between;gap:20px;margin-bottom:11px}.scan-timeline label{font-size:9px;letter-spacing:1px;color:#777e70}.scan-timeline output{font-size:11px;font-weight:600;color:#3c5942}.scan-timeline input{display:block;width:100%;accent-color:#385c47;height:5px;cursor:pointer}#scan-reset{font-size:25px;color:#606b59;display:flex;gap:9px;align-items:center;padding:10px 0 10px 10px}#scan-reset>span{font-size:12px}.scan-disclaimer{font-size:11px;line-height:1.7;color:#8a8d85;text-align:center;margin:17px 25px 0}.scan-experience button:focus-visible,.scan-experience input:focus-visible{outline:2px solid #355b45;outline-offset:3px}.scan-page-intro{padding:20px 0 0}.scan-page-intro+.scan-experience{padding-top:20px}.scan-entry-link{display:inline-flex;align-items:center;gap:13px;font-size:12px;color:var(--red);margin-top:18px;font-weight:600}.scan-entry-link:hover{text-decoration:underline}.scan-heading h1{font:700 65px/1.03 var(--head);margin-top:20px}
.scan-standalone{padding-top:30px}.scan-standalone .scan-heading{margin-bottom:28px}.scan-standalone .scan-heading h1{font-size:54px}.scan-standalone .scan-viewport{height:500px}
@media(max-width:1100px){.scan-workspace{grid-template-columns:minmax(0,1fr) 245px}.scan-analysis{padding:30px 20px}.scan-viewport{height:520px}.scan-heading h2{font-size:50px}.scan-scenario-tabs>button{font-size:12px;padding:11px 15px}.scan-demo-label{font-size:8px;letter-spacing:.8px}.scan-play{min-width:180px;padding:17px 15px}.scan-console{gap:22px}.scan-heading{gap:35px}.scan-heading>p{font-size:14px;max-width:320px}}
@media(max-width:850px){.scan-workspace{grid-template-columns:1fr}.scan-viewport{height:510px}.scan-analysis{display:grid;grid-template-columns:1fr 1fr;gap:12px 30px;padding:26px 30px;border-left:0;border-top:1px solid #e3e4e0}.scan-scenario-number{display:none}.scan-overline{grid-column:1/-1}.scan-analysis h3{margin:0;grid-column:1}.scan-analysis>#scan-description{grid-column:1;grid-row:3;margin:0}.scan-results{grid-column:2;grid-row:2/4;margin:10px 0}.scan-legend{grid-column:1/3;display:flex;gap:25px;padding-top:15px}.scan-analysis>.scan-explainer{grid-column:1/3;margin:0}.scan-top{padding:18px}.scan-demo-label{display:none}.scan-heading{align-items:flex-start}.scan-heading>p{max-width:250px}.scan-console{padding:22px}.scan-timeline label{font-size:8px}.scan-play{font-size:10px}.scan-heading h1{font-size:55px}}
@media(max-width:600px){.scan-experience{padding-block:50px}.scan-heading{display:block;margin-bottom:25px}.scan-heading .eyebrow{font-size:9px}.scan-heading h2,.scan-heading h1{font-size:42px;margin-top:16px}.scan-heading>p{max-width:none;font-size:13px;line-height:1.8;margin-top:20px}.scan-shell{border-radius:15px}.scan-top{padding:13px 10px;overflow-x:auto}.scan-scenario-tabs{width:100%;gap:0;padding:4px;justify-content:space-between}.scan-scenario-tabs>button{font-size:10px;padding:10px 10px;flex:1}.scan-viewport{height:405px}.scan-view-controls{left:12px;top:13px;gap:0}.scan-view-controls>button{font-size:9px;padding:8px 10px}.scan-viewport-bottom{bottom:14px;left:13px;right:13px;font-size:8px;gap:7px}.scan-viewport-bottom>label{font-size:9px;padding:9px 10px;gap:6px}.scan-viewport-bottom input{height:12px;width:12px}.scan-analysis{padding:24px 20px;gap:12px 20px;grid-template-columns:1fr}.scan-overline{font-size:8px}.scan-analysis h3{font-size:29px}.scan-analysis>#scan-description{grid-column:1;grid-row:auto;font-size:12px;line-height:1.8}.scan-results{grid-column:1;grid-row:auto;margin:9px 0;gap:13px}.scan-results>div{font-size:11px;grid-template-columns:7px 1fr auto}.scan-results b{font-size:10px}.scan-legend{grid-column:1;gap:20px;padding-top:17px}.scan-legend>span{font-size:9px}.scan-analysis>.scan-explainer{grid-column:1;font-size:9px}.scan-console{padding:18px 18px 21px;gap:18px;flex-wrap:wrap}.scan-play{flex:1;min-width:0;font-size:10px;min-height:45px;padding:14px 14px}#scan-reset{font-size:23px;padding:7px}#scan-reset>span{font-size:11px}.scan-timeline{flex-basis:100%;order:3}.scan-timeline>div{margin:0 0 12px}.scan-timeline label{font-size:8px}.scan-timeline output{font-size:11px}.scan-timeline input{height:8px}.scan-disclaimer{font-size:9px;margin:14px 5px 0;line-height:1.8}}
@media(max-width:600px){.scan-standalone .scan-heading h1{font-size:42px}.scan-standalone .scan-viewport{height:405px}}
@media(prefers-reduced-motion:reduce){.scan-loading>span{animation:none}}