/* A self-contained, illustrative app + instrument walkthrough. */
.wf-section{background:#e8e9e0;scroll-margin-top:22px}
.wf-section .section-heading{margin-bottom:42px}
.wf-section .split-heading>p{max-width:310px}
.wf-demo{--run-progress:0%;--phase-progress:0%;color:#f2f0e9;background:#25301f;border:1px solid #3c4a33;border-radius:12px;overflow:hidden;box-shadow:0 28px 65px #27301f12}
.wf-topline{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:22px 32px;border-bottom:1px solid #ffffff18;color:#b9c4ae}
.wf-topline .mono{font-size:8px}
.wf-topline>span:first-child{display:flex;align-items:center;gap:10px}
.wf-topline i{width:5px;height:5px;border-radius:50%;background:#d79c80}
.wf-stage{display:grid;grid-template-columns:minmax(0,.8fr) 80px minmax(0,1fr);gap:16px;align-items:center;padding:42px 44px 38px;background:radial-gradient(ellipse at 23% 65%,#647b3f24,transparent 55%)}
.wf-hardware{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0}
.wf-jack{display:flex;flex-direction:column;align-items:center}
.wf-jack>.mono{font-size:7px;color:#bcc6b1}
.wf-wallport{margin-top:12px;width:51px;height:57px;border:1px solid #9ba78e;border-radius:5px;background:#35402d;position:relative;box-shadow:inset 0 1px #ffffff16,0 8px 18px #0a0e0715;display:grid;place-items:center}
.wf-wallport:before,.wf-wallport:after{content:'';position:absolute;left:24px;width:3px;height:3px;border:1px solid #829375;border-radius:50%;top:5px}
.wf-wallport:after{top:auto;bottom:5px}
.wf-wallport i{height:18px;width:22px;border:1px solid #b4bda8;background:linear-gradient(90deg,#c6b486 1px,transparent 1px) 3px 2px/2px 5px repeat-x,#151e12;clip-path:polygon(0 0,100% 0,100% 75%,73% 75%,73% 100%,27% 100%,27% 75%,0 75%)}
.wf-jack>strong{font-size:10px;margin-top:8px;font-weight:400;color:#cbd4bf}
.wf-cable{height:59px;width:1px;background:#849877;position:relative;margin-top:7px;isolation:isolate}
.wf-cable:after{position:absolute;content:'';top:0;height:15px;left:-1px;width:3px;background:#e5b19a;border-radius:2px;opacity:0}
.wf-device{position:relative;perspective:650px;width:min(100%,290px);height:190px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 25px 15px #090e0860)}
.wf-device:after{content:'';position:absolute;inset:41px 20px 10px;z-index:0;border:1px solid #d9bb7440;border-radius:5px;transform:rotateX(38deg) rotateZ(-12deg) translateY(4px);background:#4e5334}
.wf-device img{width:100%;height:auto;position:relative;z-index:1;transform:rotateX(38deg) rotateZ(-12deg);transform-origin:center;transition:filter .5s}
.wf-device-caption{text-align:center;margin-top:12px}
.wf-device-caption>strong{display:block;font:500 24px var(--display);letter-spacing:-.04em}
.wf-device-caption>span{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:9px;font-size:10px;color:#c4d0b8}
.wf-device-caption i{width:5px;height:5px;background:#bacb9e;border-radius:50%}
.wf-device-note{font-size:8px;color:#a5b497;margin-top:16px;text-align:center}
.wf-connection{align-self:center;display:flex;flex-direction:column;align-items:center;gap:17px;margin-top:90px;color:#c4d4b1}
.wf-connection>svg{width:15px;height:24px;fill:none;stroke:#c4d4b1;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wf-data-path{width:100%;height:1px;background:#8caa6f60;position:relative}
.wf-data-path:before,.wf-data-path:after{content:'';position:absolute;top:-2px;width:5px;height:5px;border:1px solid #b5cd95;border-radius:50%;left:-1px;background:#25301f}
.wf-data-path:after{left:auto;right:-1px}
.wf-data-path i{width:8px;height:2px;background:#dbad8a;position:absolute;top:0;left:4px;opacity:0}
.wf-connection>.mono{font-size:6px;letter-spacing:.06em;text-align:center;white-space:nowrap}
.wf-screen{background:var(--paper);color:var(--carbon);border:1px solid #9caa8b;border-radius:9px;box-shadow:0 28px 50px #10160d45;overflow:hidden;min-width:0}
.wf-screen-top{padding:16px 20px;border-bottom:1px solid #d9ddcf;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f1f1e9}
.wf-screen-top>div{display:flex;align-items:center;gap:10px}
.wf-screen-top img{height:20px;width:13px}
.wf-screen-top strong{font:500 19px var(--display);letter-spacing:-.05em}
.wf-screen-top>span{font-size:8px;color:#52634a;display:flex;align-items:center;gap:6px}
.wf-screen-top i{width:4px;height:4px;background:#5e7e43;border-radius:50%}
.wf-screen-body{padding:25px 27px 22px}
.wf-screen-location{border-bottom:1px solid #dedfd5;padding-bottom:16px}
.wf-screen-location>.mono{display:block;font-size:7px;color:#626c5b}
.wf-screen-location>strong{display:flex;gap:12px;align-items:baseline;margin-top:6px;font:500 22px var(--display);letter-spacing:-.04em}
.wf-screen-location>strong>span{font:8px var(--mono);letter-spacing:0;color:#69715f}
.wf-scene{min-height:302px;padding-top:23px}
.wf-scene[hidden]{display:none}
.wf-kicker{font-size:7px;color:#916045}
.wf-scene h3{font-size:32px;line-height:1.08;margin-top:13px;letter-spacing:-.05em}
.wf-scene>p:not(.wf-kicker):not(.wf-screen-note){font-size:11px;color:#636b5c;line-height:1.85;max-width:285px;margin-top:13px}
.wf-ready-row{display:flex;gap:12px;align-items:center;padding:16px 0 20px}
.wf-check{width:27px;height:27px;background:#e7eddc;border:1px solid #c7d5b6;border-radius:50%;display:inline-grid;place-items:center;color:#536c3e;font-size:12px;flex:none}
.wf-ready-row strong,.wf-ready-row div>span{display:block;font-weight:400;font-size:10px;line-height:1.7}
.wf-ready-row div>span{font-size:8px;color:#67715e}
.wf-action{display:flex;gap:25px;align-items:center;justify-content:space-between;min-height:43px;background:#34472a;color:#faf9f6;padding:11px 14px;font-size:10px;border:0;border-radius:4px;min-width:170px}
.wf-action>span{font-size:16px}
.wf-action:hover{background:#b64d2e}
.wf-run-meter{height:3px;background:#dce3d3;margin-block:21px 13px;overflow:hidden}
.wf-run-meter>i{display:block;width:var(--run-progress);height:100%;background:#6b864e}
.wf-run-checks>div{display:grid;grid-template-columns:7px 1fr auto;gap:9px;align-items:center;font-size:9px;padding:10px 0;border-bottom:1px solid #e1e5da}
.wf-run-checks strong{font-weight:400}
.wf-run-checks div>span:last-child{font-size:7px;color:#6e7864}
.wf-run-dot{height:4px;width:4px;border:1px solid #6d8457;border-radius:50%}
.wf-screen-note{font-size:8px;line-height:1.8;color:#68715e;margin-top:15px}
.wf-reading{margin:16px 0 18px}
.wf-reading>div{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid #dfe3d8;padding:10px 0;font-size:9px}
.wf-reading dt{color:#637059}
.wf-reading dd{margin:0;text-align:right;display:flex;align-items:center;gap:6px}
.wf-reading dd i{height:4px;width:4px;background:#678749;border-radius:50%}
.wf-reading .wf-reading-limited{font-size:8px;background:#efece0;border:1px solid #e1dac8;margin-top:8px;padding:10px 8px}
.wf-reading-limited dd{color:#806744}
.wf-saved-title{display:flex;align-items:center;gap:14px;margin-top:12px}
.wf-saved-title h3{margin:0}
.wf-saved-title .wf-check{height:34px;width:34px;font-size:15px}
.wf-saved-record{margin-top:21px;border:1px solid #ccd7bd;border-left:3px solid #6d8650;background:#eff2e8;padding:15px 14px}
.wf-saved-record>.mono{display:block;font-size:6px;letter-spacing:.03em;color:#68785b}
.wf-saved-record>strong{font:500 20px var(--display);letter-spacing:-.03em;display:block;margin-top:6px}
.wf-saved-record>span:not(.mono){font-size:8px;color:#5f6e53}
.wf-saved-record>div{border-top:1px solid #d4dcc9;margin-top:13px;padding-top:11px}
.wf-saved-record>div>.mono{font-size:6px;color:#6c795e}
.wf-saved-record p{font-size:9px;line-height:1.8;margin-top:5px}
.wf-screen-bottom{padding:12px 20px;border-top:1px solid #d9ddcf;display:flex;justify-content:space-between;gap:10px;font-size:6px;color:#6a745e}
.wf-screen-bottom>.mono{font-size:6px;letter-spacing:.03em}
.wf-timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;padding:0 32px 24px}
.wf-timeline>button{position:relative;text-align:left;border:0;border-top:1px solid #78896a;background:transparent;color:#b2c0a3;padding:18px 0 0;display:grid;grid-template-columns:27px 1fr;gap:4px 9px;min-height:66px}
.wf-timeline>button>.mono{font-size:8px;grid-row:1/3;padding-top:3px;color:#94a782}
.wf-timeline strong{font:500 20px var(--display);letter-spacing:-.03em}
.wf-timeline>button>span:not(.mono){font-size:8px}
.wf-timeline>button>i{position:absolute;left:0;top:-1px;height:2px;width:0;background:#dfad90}
.wf-timeline>button[aria-current=step]{color:#f7f5ed}
.wf-timeline>button[aria-current=step]>.mono{color:#dfad90}
.wf-timeline>button[aria-current=step]>i{width:var(--phase-progress)}
.wf-timeline>button[data-demo-complete=true]>i{width:100%}
.wf-timeline>button:hover{color:white}
.wf-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:13px 32px;border-top:1px solid #ffffff18}
.wf-controls>p{font-size:9px;color:#b1c0a1}
.wf-controls>div{display:flex;gap:20px;align-items:center}
.wf-controls button{display:flex;align-items:center;gap:9px;border:0;background:none;color:#e7ebdd;font-size:9px;min-height:44px;padding:7px 0}
.wf-controls button>span[aria-hidden=true]{font-size:19px;line-height:1}
.wf-play-icon{display:block;width:10px;height:11px;border-left:9px solid #e7ebdd;border-top:5px solid transparent;border-bottom:5px solid transparent}
.wf-demo[data-demo-playing=true] .wf-play-icon{border-block:0;border-inline:3px solid #e7ebdd;width:9px;height:10px}
.wf-demo[data-demo-playing=true][data-demo-phase="1"] .wf-data-path i{animation:wf-transfer 1.8s linear infinite}
.wf-demo[data-demo-playing=true][data-demo-phase="1"] .wf-data-path i:nth-child(2){animation-delay:.6s}
.wf-demo[data-demo-playing=true][data-demo-phase="1"] .wf-data-path i:nth-child(3){animation-delay:1.2s}
.wf-demo[data-demo-playing=true][data-demo-phase="1"] .wf-cable:after{animation:wf-cable 1.6s linear infinite}
.wf-demo[data-demo-playing=true][data-demo-phase="1"] .wf-run-dot{animation:wf-pulse 1.8s ease-in-out infinite}
.wf-demo[data-demo-playing=true][data-demo-phase="1"] .wf-run-checks>div:nth-child(2) .wf-run-dot{animation-delay:.6s}
.wf-demo[data-demo-playing=true][data-demo-phase="1"] .wf-run-checks>div:nth-child(3) .wf-run-dot{animation-delay:1.2s}
.wf-demo[data-demo-phase="3"] .wf-device-caption i{box-shadow:0 0 0 4px #b0d18c17}
.wf-demo :focus-visible{outline:2px solid #e7b497;outline-offset:5px}
.wf-screen :focus-visible{outline-color:#b64d2e}
.wf-disclosure{font-size:10px;line-height:1.9;color:#636d59;max-width:800px;margin:22px 0 0}
.wf-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wf-noscript{font-size:12px;line-height:1.8;padding:20px 32px;border-top:1px solid #ffffff18}
.wf-inline-link{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.wf-bag-link{border-top:1px solid var(--line);padding-block:25px 60px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.wf-bag-link>p{font-size:12px;color:var(--muted)}
@keyframes wf-transfer{0%{left:5%;opacity:0}20%{opacity:1}80%{opacity:1}100%{left:90%;opacity:0}}
@keyframes wf-cable{0%{top:0;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:85%;opacity:0}}
@keyframes wf-pulse{0%,100%{background:transparent;box-shadow:none}50%{background:#839b60;box-shadow:0 0 0 3px #6d84571a}}
@media(min-width:1450px){.wf-stage{padding:50px 64px;gap:32px}.wf-device{width:320px;height:210px}.wf-screen-body{padding:30px 34px}.wf-scene{min-height:318px}.wf-scene h3{font-size:36px}}
@media(max-width:1100px){.wf-stage{padding:32px 28px;gap:13px;grid-template-columns:minmax(0,.75fr) 45px minmax(0,1fr)}.wf-topline{padding:20px 26px}.wf-device{height:160px}.wf-screen-body{padding:22px 22px 18px}.wf-scene h3{font-size:29px}.wf-timeline{gap:20px;padding-inline:26px}.wf-timeline strong{font-size:18px}.wf-timeline>button{grid-template-columns:20px 1fr;gap:4px 5px}.wf-timeline>button>span:not(.mono){font-size:7px}.wf-controls{padding-inline:26px}}
@media(max-width:850px){.wf-stage{grid-template-columns:minmax(0,.65fr) 35px minmax(0,1fr);gap:9px;padding:30px 22px}.wf-device{height:130px}.wf-jack>.mono{font-size:6px;letter-spacing:.03em}.wf-device-caption>strong{font-size:21px}.wf-device-caption>span{font-size:8px;gap:6px}.wf-device-note{font-size:7px}.wf-screen-top{padding:14px}.wf-screen-top strong{font-size:17px}.wf-screen-top>span{font-size:6px}.wf-screen-body{padding:20px 17px 16px}.wf-scene{min-height:306px}.wf-scene h3{font-size:26px}.wf-connection>.mono{font-size:5px;letter-spacing:0}.wf-topline .mono{font-size:6px}.wf-timeline{gap:17px}.wf-timeline>button{display:flex;flex-direction:column;gap:5px}.wf-timeline>button>.mono{padding:0;font-size:7px}.wf-timeline strong{font-size:19px}.wf-controls>p{font-size:8px}}
@media(max-width:680px){.wf-section .section-heading{margin-bottom:30px}.wf-topline{padding:17px 18px;gap:10px}.wf-topline .mono{font-size:5px;letter-spacing:.04em}.wf-topline>span:first-child{gap:7px}.wf-topline i{width:4px;height:4px}.wf-stage{display:grid;grid-template-columns:1fr;padding:22px 20px 26px;gap:0;background:radial-gradient(ellipse at 50% 16%,#647b3f24,transparent 60%)}.wf-hardware{display:grid;grid-template-columns:70px 35px minmax(0,1fr);align-items:center;width:100%;column-gap:8px}.wf-jack{grid-column:1;grid-row:1;align-self:center}.wf-jack>.mono{font-size:5px;max-width:70px;text-align:center;line-height:1.6}.wf-wallport{width:33px;height:38px;margin-top:7px}.wf-wallport:before,.wf-wallport:after{left:14px;top:3px;width:2px;height:2px}.wf-wallport:after{top:auto;bottom:3px}.wf-wallport i{width:15px;height:12px}.wf-jack>strong{font-size:8px;margin-top:5px}.wf-cable{height:1px;width:100%;grid-row:1;grid-column:2;margin:0;transform:none}.wf-cable:after{width:9px;height:2px;left:0;top:0}.wf-device{grid-row:1;grid-column:3;width:100%;height:95px;max-width:170px;justify-self:center}.wf-device img{width:min(100%,135px);transform:rotateX(28deg) rotateZ(-10deg)}.wf-device:after{display:none}.wf-device-caption{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px;padding-top:14px;border-top:1px solid #ffffff1c}.wf-device-caption>strong{font-size:20px}.wf-device-caption>span{margin:0;font-size:8px}.wf-device-note{grid-column:1/-1;font-size:6px;text-align:left;margin-top:7px}.wf-connection{margin:12px 0;flex-direction:row;justify-content:center;gap:11px;height:22px}.wf-connection>svg{width:9px;height:15px}.wf-connection>.mono{font-size:6px;letter-spacing:.07em}.wf-data-path{width:45px}.wf-screen{width:100%;max-width:420px;margin:auto}.wf-screen-top{padding:14px 16px}.wf-screen-top>span{font-size:7px}.wf-screen-top strong{font-size:18px}.wf-screen-body{padding:20px 19px 17px}.wf-screen-location>.mono{font-size:6px}.wf-screen-location>strong{font-size:22px}.wf-scene{min-height:308px;padding-top:22px}.wf-scene h3{font-size:31px}.wf-kicker{font-size:6px}.wf-scene>p:not(.wf-kicker):not(.wf-screen-note){font-size:11px}.wf-screen-bottom{padding:12px 16px}.wf-screen-bottom>.mono{font-size:5px}.wf-timeline{padding:0 20px 22px;gap:13px}.wf-timeline>button{min-height:83px;padding-top:14px;gap:6px}.wf-timeline>button>.mono{font-size:6px}.wf-timeline strong{font-size:17px}.wf-timeline>button>span:not(.mono){font-size:6px;line-height:1.7;max-width:55px}.wf-controls{padding:10px 20px;display:block}.wf-controls>p{font-size:8px;margin-top:6px}.wf-controls>div{justify-content:space-between;gap:20px;margin-top:2px}.wf-controls button{font-size:10px}.wf-disclosure{font-size:9px;margin-top:19px}.wf-bag-link{display:block;padding-bottom:45px}.wf-bag-link>p{font-size:11px;margin-bottom:10px}.wf-noscript{font-size:11px;padding-inline:20px}@keyframes wf-cable{0%{left:0;opacity:0}20%{opacity:1}80%{opacity:1}100%{left:85%;opacity:0}}}
@media(max-width:360px){.wf-stage{padding-inline:14px}.wf-timeline{padding-inline:14px;gap:9px}.wf-screen-body{padding-inline:15px}.wf-scene h3{font-size:27px}.wf-scene{min-height:315px}.wf-device-caption>strong{font-size:18px}.wf-device-caption>span{font-size:7px}.wf-topline{padding-inline:14px}.wf-topline .mono{font-size:4.6px}.wf-controls{padding-inline:14px}.wf-reading{font-size:8px}.wf-reading>div{font-size:8px}.wf-ready-row strong{font-size:9px}.wf-screen-top>span{font-size:6px}}
@media(max-width:360px){.wf-timeline strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){.wf-demo *,.wf-demo *:after,.wf-demo *:before{animation:none!important;transition:none!important}}