/* The IR animation's canvas pipeline, contained in one responsive coordinate space. */
.foundation{--foundation-purple:#88709f;--foundation-green:#608671;--foundation-feedback:#879ca0;position:relative;min-width:0;margin:0;border-block:1px solid var(--line);padding:28px 0 0}
.foundation-canvas{position:relative;min-width:0;isolation:isolate;width:100%;overflow:hidden;background:#f2f1eb}
.foundation-canvas canvas{width:100%;height:auto;display:block;max-width:100%;aspect-ratio:1400/590}
.foundation-legend{display:flex;align-items:center;gap:12px 27px;flex-wrap:wrap;padding:15px 0 19px;border-bottom:1px solid var(--line);font-size:11px;line-height:1.6;color:var(--muted)}
.foundation-legend>span{display:inline-flex;align-items:center;gap:8px}
.foundation-key{display:block;width:16px;height:1px;background:var(--foundation-purple)}
.foundation-key--search{background:var(--foundation-green)}
.foundation-key--feedback{background:linear-gradient(90deg,var(--foundation-feedback) 50%,transparent 50%) 0/6px 1px}
.foundation-legend .foundation-example{margin-left:auto;font:9px/1.6 'SFMono-Regular',Consolas,monospace;letter-spacing:.025em}
.foundation-playback-buttons{display:flex;gap:20px;flex:none}
.foundation-playback-buttons button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:5px 0;border:0;background:transparent;color:var(--muted);font-size:12px}
.foundation-playback-buttons button:hover{color:var(--ink)}
.foundation-playback-buttons svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.foundation figcaption{display:grid;grid-template-columns:210px 1fr;gap:25px;padding:23px 0;min-height:103px}
.foundation-step-title{font-size:13px;color:var(--foundation-purple)}
.foundation figcaption p:last-child{font-size:14px;color:var(--muted);line-height:1.7;max-width:80ch}
.foundation[data-active=search] .foundation-step-title{color:var(--foundation-green)}
.foundation[data-active=fine-tune] .foundation-step-title{color:var(--foundation-feedback)}
.foundation-screen-reader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1000px){.foundation figcaption{grid-template-columns:1fr;gap:7px;padding-block:19px;min-height:125px}.foundation figcaption p:last-child{font-size:13px}.foundation-legend .foundation-example{margin-left:0}}
@media(max-width:820px){.foundation-canvas canvas{aspect-ratio:auto}.foundation-legend{gap:11px 20px;font-size:10px}.foundation-legend .foundation-example{flex-basis:100%;font-size:9px}.foundation-playback-buttons{gap:16px}}
@media(max-width:420px){.foundation-playback-buttons{gap:13px}.foundation-playback-buttons button{font-size:11px;gap:7px}.foundation-legend{gap:10px 17px}.foundation-legend>span{gap:6px}.foundation-key{width:13px}.foundation figcaption{min-height:155px}}

/* Example chooser above the pipeline: routing, robot path, chip design. */
.foundation-scenarios{display:flex;align-items:center;gap:6px 26px;flex-wrap:wrap;min-width:0}
.foundation-scenarios-label{font:10px/1.6 'SFMono-Regular',Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.foundation-scenarios button{border:0;border-bottom:2px solid transparent;background:transparent;padding:12px 0;min-height:44px;font-size:15px;letter-spacing:-.01em;color:var(--muted);cursor:pointer}
.foundation-scenarios button[aria-pressed=true]{color:var(--ink);border-color:var(--foundation-purple)}
.foundation-scenarios button:hover{color:var(--ink)}
.foundation-scenarios button:focus-visible,.foundation-playback-buttons button:focus-visible{outline:2px solid var(--foundation-purple);outline-offset:4px}
.foundation-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap}
@media(max-width:420px){.foundation-scenarios{gap:4px 18px}.foundation-scenarios button{font-size:14px}}