/* A scene-first layout: the viewport keeps its own space at every breakpoint. */
.experience{background:#eef1f2}
.experience .section-intro>p{max-width:420px;min-width:0}
.safety-demo{grid-template-columns:minmax(0,1fr) 340px;border:1px solid #dbe1e3;border-radius:20px;overflow:hidden;box-shadow:0 24px 70px #182b4010;margin:0}
.demo-visual{padding:0;border:0;border-right:1px solid #e0e5e5;background:#e9edec;display:flex;flex-direction:column;min-width:0}
.demo-topline{padding:24px 30px 0;font-size:10px;letter-spacing:.14em;position:relative;z-index:2;color:#586b72}
.demo-topline>span:last-child{display:inline-flex;align-items:center;gap:7px;font-size:11px;padding:7px 12px;background:#dce9cb;color:#415727}
.demo-topline>span:last-child:before{content:'';height:6px;width:6px;background:currentColor;border-radius:50%}
.demo-scene{position:relative;height:480px;flex:1;min-height:380px;isolation:isolate;overflow:hidden;display:none}
.scene-ready .demo-scene{display:block}.scene-ready .radar{display:none}
.demo-scene canvas{display:block;width:100%;height:100%;position:absolute;inset:0;cursor:grab;touch-action:pan-y;outline-offset:-4px}
.demo-scene canvas:active{cursor:grabbing}
.scene-caption{position:absolute;top:23px;left:30px;z-index:1;pointer-events:none}
.scene-caption>span{font-size:19px;font-weight:650;color:#263e46;letter-spacing:-.04em}
.scene-caption p{font-size:11px;color:#72838a;margin-top:6px}
.scene-view{position:absolute;bottom:20px;left:30px;display:flex;padding:4px;gap:2px;border:1px solid #d2dcda;background:#ffffffb8;backdrop-filter:blur(12px);border-radius:30px;z-index:2}
.scene-view button{border:0;border-radius:20px;background:transparent;color:#677b81;padding:9px 15px;min-height:38px;font-size:11px}
.scene-view button[aria-pressed=true]{background:#203b43;color:white;box-shadow:0 2px 6px #102c4220}
.scene-hint{position:absolute;bottom:35px;right:28px;font-size:10px;color:#677d83;pointer-events:none}
.demo-feedback{background:#f8faf8;border:0;border-top:1px solid #dce3de;margin:0;padding:23px 30px 25px;min-height:122px;position:relative}
.demo-feedback:before{content:'';position:absolute;left:0;top:24px;bottom:24px;width:3px;background:#96b557}
.demo-feedback h3{font-size:20px;margin:0 0 7px;letter-spacing:-.035em;line-height:1.45}
.demo-feedback p{font-size:12px;line-height:1.75;max-width:630px}
.safety-demo[data-stage="3"] .demo-feedback{background:#fff3e9}
.safety-demo[data-stage="3"] .demo-feedback:before{background:#e98343}
.demo-controls{padding:32px 28px;display:flex;flex-direction:column;gap:26px;background:#fff}
.demo-control-heading .eyebrow{font-size:9px;letter-spacing:.13em;color:#6f857d;margin-bottom:13px}
.demo-control-heading h3{font-size:25px;line-height:1.4;letter-spacing:-.05em;font-weight:650}
.demo-controls fieldset{margin:0;min-width:0}
.demo-controls legend,.demo-controls .control-label{font-size:12px;margin:0 0 12px;font-weight:650}
.control-number{font-size:10px;color:#84978a;margin-right:9px;font-weight:500}
.direction-choices{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.direction-choices button{border-radius:7px;border-color:#dfe5e0;background:#f9faf8;min-height:44px;padding:9px 3px;font-size:11px}
.direction-choices button[aria-pressed=true]{background:#223f44;border-color:#223f44;color:#fff}
#demo-equipment{min-height:46px;border:1px solid #dfe5e0;border-radius:7px;background:#f9faf8;font-size:12px;padding:12px}
.demo-controls .range-label{margin-top:0;gap:8px;align-items:center}
.demo-controls .range-label>span{font-size:12px;font-weight:650;color:var(--ink)}
.demo-controls .range-label .control-number{font-size:10px;color:#84978a;font-weight:500}
#demo-distance-label{font-size:10px;color:#728376;font-weight:400}
#demo-approach{appearance:none;-webkit-appearance:none;background:linear-gradient(90deg,#93b653 var(--approach,0%),#e2e7e1 var(--approach,0%));height:5px;min-height:5px;border-radius:10px;margin:14px 0 13px;touch-action:pan-y}
#demo-approach::-webkit-slider-thumb{appearance:none;width:23px;height:23px;border:5px solid white;border-radius:50%;background:#6c8e34;box-shadow:0 0 0 1px #afc697,0 3px 8px #37531925}
#demo-approach::-moz-range-thumb{width:13px;height:13px;border:5px solid white;border-radius:50%;background:#6c8e34;box-shadow:0 0 0 1px #afc697}
.range-labels{font-size:10px;margin:0;color:#8a9691}
.demo-actions{margin:0;display:flex;flex-direction:column;gap:8px;align-items:stretch}
.demo-actions .button{justify-content:space-between;width:100%;font-size:12px;min-height:48px;padding:13px 19px;border-radius:8px;background:#203d43}
.demo-actions .text-button{min-height:40px;font-size:11px;align-self:center;padding:8px 20px}
.demo-control-note{font-size:11px;line-height:1.8;color:#8b9790;margin-top:auto}
.demo-progress{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);margin:0;gap:0;background:#fbfcfa;border-top:1px solid #dfe5df;counter-reset:steps}
.demo-progress i{display:none}
.demo-progress span{padding:19px 24px;border-radius:0;position:relative;text-align:center;font-size:12px;letter-spacing:.025em;color:#929d99;border-right:1px solid #e0e6df;background:transparent}
.demo-progress span:last-child{border-right:0}
.demo-progress span:before{content:'';height:2px;position:absolute;top:-1px;left:0;right:100%;background:#8eaf55;transition:right .35s}
.demo-progress span.is-active{color:#3c5729;background:#eff4e8}
.demo-progress span.is-active:before{right:0}
.safety-demo[data-stage="3"] [data-step="3"]{background:#fff0e3;color:#9c552c}
.safety-demo[data-stage="3"] [data-step="3"]:before{background:#d38248}
.experience>.fine-print{margin-top:19px;max-width:980px;font-size:10px;line-height:1.9;color:#81908d}
@media(min-width:1600px){.safety-demo{grid-template-columns:minmax(0,1fr) 390px}.demo-controls{padding:38px 34px;gap:29px}.demo-scene{height:530px;min-height:490px}.scene-caption{top:28px}.scene-caption>span{font-size:24px}.scene-caption p{font-size:12px}.demo-feedback{padding:26px 34px;min-height:130px}.demo-feedback h3{font-size:23px}.demo-feedback p{font-size:13px}.demo-control-heading h3{font-size:28px}.demo-progress span{padding:22px;font-size:13px}}
@media(max-width:1100px){.safety-demo{grid-template-columns:minmax(0,1fr) 300px}.demo-controls{padding:28px 22px;gap:24px}.demo-control-heading h3{font-size:23px}.scene-caption{left:22px}.scene-caption>span{font-size:17px}.demo-topline{padding:22px 22px 0;font-size:8px}.scene-view{left:22px}.scene-hint{display:none}.demo-feedback{padding:21px 23px;min-height:138px}.demo-feedback h3{font-size:18px}.demo-feedback p{font-size:11px}}
@media(max-width:960px){.experience .section-intro{display:block}.experience .section-intro>p{max-width:none;margin-top:22px}.safety-demo{grid-template-columns:1fr}.demo-visual{border:0}.demo-scene{height:440px;flex:none;min-height:0}.demo-topline{padding:23px 26px 0;font-size:9px}.scene-caption{left:26px}.scene-caption>span{font-size:20px}.scene-view{left:26px}.scene-hint{display:block;font-size:9px}.demo-feedback{min-height:110px;padding:22px 26px}.demo-feedback h3{font-size:20px}.demo-feedback p{font-size:12px;max-width:none}.demo-controls{padding:25px 26px;display:grid;grid-template-columns:1fr 1fr;gap:24px 30px;border-top:1px solid #dfe5df}.demo-control-heading,.demo-control-note{display:none}.demo-actions{flex-direction:row;align-items:center;gap:12px}.demo-actions .button{width:auto;flex:1;min-width:0;font-size:11px;padding:12px 14px}.demo-actions .text-button{padding:10px 0;font-size:10px}.demo-controls .range-label{margin-bottom:9px}.scene-view button{min-height:38px}}
@media(max-width:600px){.experience.section-shell{padding-left:18px;padding-right:18px}.experience .section-intro{padding:0 6px}.experience .section-intro h2{font-size:31px}.experience .section-intro>p{font-size:12px}.safety-demo{border-radius:14px;margin:0}.demo-topline{padding:18px 18px 0;font-size:7px;letter-spacing:.1em}.demo-topline>span:last-child{font-size:9px;padding:6px 9px}.demo-scene{height:350px}.scene-caption{top:16px;left:18px}.scene-caption>span{font-size:16px}.scene-caption p{font-size:10px;margin-top:4px}.scene-view{left:18px;bottom:13px;padding:3px}.scene-view button{font-size:10px;min-height:34px;padding:7px 12px}.scene-hint{right:15px;bottom:28px;font-size:8px;max-width:90px;text-align:right;line-height:1.5}.demo-feedback{padding:19px 18px;min-height:132px}.demo-feedback h3{font-size:17px;line-height:1.45}.demo-feedback p{font-size:11px;line-height:1.8}.demo-feedback:before{top:21px;bottom:21px}.demo-controls{padding:23px 18px 18px;gap:22px 16px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}.demo-controls legend,.demo-controls .control-label{font-size:11px;margin-bottom:10px}.control-number{margin-right:5px;font-size:9px}.direction-choices{grid-template-columns:1fr 1fr;gap:5px}.direction-choices button{font-size:11px;min-height:38px;padding:7px 3px}.demo-equipment-setting{align-self:start}#demo-equipment{font-size:12px;min-height:46px;padding:10px 8px}.demo-distance,.demo-actions{grid-column:1/-1}.demo-controls .range-label>span{font-size:11px}#demo-approach{margin:12px 0 13px}.demo-actions .button{min-height:46px;font-size:12px;padding:11px 16px}.demo-actions .text-button{min-height:44px;padding:8px;font-size:11px}.demo-progress span{padding:16px 4px;font-size:10px;letter-spacing:0}.experience>.fine-print{font-size:9px;margin:15px 6px 0}}
@media(max-width:360px){.demo-scene{height:320px}.scene-caption>span{font-size:14px}.scene-caption p{font-size:9px}.demo-controls{padding:20px 14px;gap:20px 12px}.demo-feedback h3{font-size:16px}.scene-hint{display:none}.demo-topline{font-size:6px}.demo-actions .button{font-size:11px}}
/* The non-WebGL fallback also needs an explicit width inside the flex scene column. */
.demo-visual>.radar{width:calc(100% - 64px);flex:none;margin:36px auto}
/* Keep scene headings outside the interactive viewport, including the overhead camera. */
.demo-visual>.scene-caption{position:static;margin:18px 30px 0;flex:none}
@media(max-width:1100px){.demo-visual>.scene-caption{margin:18px 22px 0}}
@media(max-width:960px){.demo-visual>.scene-caption{margin:18px 26px 0}.demo-scene{height:420px}}
@media(max-width:600px){.demo-visual>.scene-caption{margin:16px 18px 0}.demo-scene{height:320px}}

/* The single approach scenario keeps the equipment and distance controls together. */
@media(max-width:960px){.demo-actions{grid-column:1/-1}.demo-equipment-setting{grid-column:1}.demo-distance{grid-column:2}}
@media(max-width:600px){.demo-controls{grid-template-columns:1fr}.demo-equipment-setting,.demo-distance{grid-column:1/-1}}

@media(max-width:600px){.scene-hint{display:none}.scene-view button{padding:7px 11px}}

.scene-legend{display:flex;flex-wrap:wrap;gap:9px 18px;margin:12px 30px 0;color:#687d7c;font-size:10px}
.scene-legend span{display:inline-flex;gap:6px;align-items:center}
.scene-legend span:before{content:'';width:10px;height:10px;border:2px solid #589a9c;border-radius:50%}
.scene-legend .legend-inner:before{border-color:#c9985b}
.safety-demo[data-stage="2"] .legend-outer,.safety-demo[data-stage="3"] .legend-outer{color:#23787a;font-weight:650}
.safety-demo[data-stage="3"] .legend-inner{color:#b76b31;font-weight:650}
@media(max-width:1100px){.scene-legend{margin-left:22px;margin-right:22px}}
@media(max-width:960px){.scene-legend{margin-left:26px;margin-right:26px}}
@media(max-width:600px){.scene-legend{margin-left:18px;margin-right:18px;font-size:9px}}
/* Match fallback rings to the same front-edge distances as the 3D scene. */
.radar{background:radial-gradient(circle closest-side,transparent calc(37.8% - 1px),#c9985b 37.8%,transparent calc(37.8% + 1px),transparent calc(58.8% - 1px),#589a9c 58.8%,transparent calc(58.8% + 1px))}

.radar-object{transform:translate(-50%,0);transition:none}
.demo-sound{align-self:flex-start;border:1px solid #dce4df;border-radius:20px;padding:9px 14px;min-height:38px;background:#f8faf7;color:#6b7d70;font-size:11px;justify-self:start}
.demo-sound[aria-pressed="true"]{color:#33583c;border-color:#a7bf98;background:#edf5e6}
@media(max-width:960px){.demo-sound{grid-column:1/-1}}