#lab-systems{min-width:0}.systems-hub{color:#e9e6ed}.sh-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:18px 0 8px}.sh-filters{display:flex;flex-wrap:wrap;gap:23px}.sh-filters button,.sh-motion{font:13px/1.5 var(--sans);padding:10px 0;border:0;border-bottom:1px solid transparent;background:none;color:#9ca6b5;cursor:pointer}.sh-filters button[aria-pressed=true]{color:#d5fa49;border-bottom-color:#d5fa49}.sh-motion{font-size:11px;flex:none}.sh-map{position:relative;height:590px;isolation:isolate}.sh-wires{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible;pointer-events:none}.sh-wire{fill:none;stroke:#484653;stroke-width:1;opacity:.35;transition:opacity .3s,stroke .3s}.sh-wire.is-lit{stroke:#9a86b3;opacity:.8;stroke-dasharray:4 8;animation:sh-current 2.2s linear infinite;animation-delay:var(--delay)}.systems-hub[data-still=true] .sh-wire{animation:none;stroke-dasharray:none}.sh-tool{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;align-items:center;text-align:left;gap:10px;width:184px;min-height:62px;padding:11px 12px;border:1px solid #3c3e44;border-radius:9px;background:#181a1d;color:#dddbe3;cursor:pointer;transition:opacity .2s,border-color .2s,box-shadow .2s;box-shadow:0 0 0 9px #111210}.sh-tool:hover,.sh-tool[aria-pressed=true]{border-color:var(--tool-color);box-shadow:0 0 0 9px #111210,0 0 25px -6px var(--tool-color)}.sh-tool.is-dim{opacity:.35}.sh-tool.is-dim:hover{opacity:1}.sh-mark{font:500 25px/1 var(--sans);width:36px;height:36px;display:grid;place-items:center;background:color-mix(in srgb,var(--tool-color) 10%,#16181b);border-radius:8px;color:var(--tool-color);flex:none}.sh-tool strong{font-size:13px;line-height:1.3;font-weight:500;display:block}.sh-tool small{font:10px/1.4 var(--mono);color:#9fa7b6;display:block;margin-top:4px}.sh-website{position:absolute;width:34%;left:33%;top:28%;border:1px solid #8e80a4;border-radius:10px;overflow:hidden;background:#ddd9e5;box-shadow:0 25px 60px #0006,0 0 0 10px #111210;color:#282333}.sh-chrome{height:30px;display:flex;justify-content:space-between;align-items:center;padding:0 10px;background:#292834;color:#b8b3c5;font:8px var(--mono);gap:5px}.sh-chrome>span:first-child{letter-spacing:3px;font-size:5px}.sh-chrome i{font-style:normal}.sh-page{padding:17px 18px 10px;position:relative;overflow:hidden}.sh-site-nav{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:25px}.sh-site-nav strong{font:700 10px var(--sans);letter-spacing:.02em}.sh-site-nav>span{font:7px var(--sans);color:#66616f}.sh-site-badge{font:7px var(--mono);color:#716481;letter-spacing:.08em}.sh-page h4{font:500 clamp(24px,2.3vw,38px)/1.04 var(--sans);letter-spacing:-.04em;margin:10px 0 27px;position:relative;z-index:1}.sh-orbit{position:absolute;right:-20px;top:65px;width:115px;height:115px;background:radial-gradient(circle at 25% 20%,#d7c6f3,#7e63a8 65%,#3a3155);border-radius:50%;transform:rotate(-25deg);opacity:.55;box-shadow:inset -15px -10px 35px #43336466}.sh-orbit i,.sh-orbit b{position:absolute;inset:25px -15px;border:1px solid #e6e0f1;border-radius:50%}.sh-orbit b{transform:rotate(70deg)}.sh-site-actions{display:flex;gap:5px;position:relative;z-index:1}.sh-site-actions button{font:9px/1.4 var(--sans);border:0;border-radius:3px;padding:8px 7px;background:#392b49;color:#fff;cursor:pointer;flex:1}.sh-site-actions button:last-child{background:#d5fa49;color:#27300c}.sh-site-status{font:8px/1.5 var(--mono);color:#6e6579;margin:13px 0 0;min-height:24px}.sh-explanation{display:grid;grid-template-columns:1fr 1.2fr;gap:35px;align-items:start;border-top:1px solid #35363b;padding-top:23px;min-height:106px}.sh-explanation h4{font:400 23px/1.35 var(--sans);letter-spacing:-.025em;color:#cbb8df;margin:0}.sh-explanation p{font:15px/1.75 var(--sans);color:#aeb7c5;margin:0;max-width:65ch}.sh-footer{display:flex;justify-content:space-between;gap:15px;margin-top:25px;color:#858e9b;font:9px/1.6 var(--mono)}.sh-tool:focus-visible,.sh-toolbar button:focus-visible,.sh-site-actions button:focus-visible{outline:2px solid #d5fa49;outline-offset:5px}@keyframes sh-current{to{stroke-dashoffset:-48}}
@media(max-width:1450px){.sh-tool{width:151px;gap:8px;padding:10px}.sh-tool strong{font-size:12px}.sh-tool small{font-size:9px}.sh-mark{width:29px;height:32px;font-size:22px}.sh-map{height:570px}.sh-site-nav>span{display:none}.sh-page{padding:14px}.sh-page h4{font-size:30px}.sh-orbit{right:-35px}}
@media(max-width:1100px) and (min-width:1001px){.sh-tool{width:136px}.sh-mark{width:24px}.sh-tool strong{font-size:11px}.sh-explanation{gap:20px}.sh-page h4{font-size:27px}.sh-site-actions{flex-direction:column}.sh-map{height:610px}}
@media(max-width:1000px){.sh-map{height:580px}.sh-tool{width:166px}.sh-tool strong{font-size:13px}.sh-website{top:28%;width:34%;left:33%}.sh-page h4{font-size:33px}.sh-footer{margin-bottom:20px}}
@media(max-width:700px){.sh-toolbar{align-items:baseline;gap:12px}.sh-filters{gap:13px}.sh-filters button{font-size:12px}.sh-motion{font-size:9px}.sh-map{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:24px 25px;padding:30px 2px;min-width:0}.sh-website{position:relative;top:auto;left:auto;width:min(360px,88%);grid-column:1/-1;margin:0 auto 15px}.sh-page{padding:20px}.sh-page h4{font-size:38px}.sh-site-actions button{font-size:11px;padding:10px}.sh-site-badge{font-size:8px}.sh-site-status{font-size:9px}.sh-tool{position:relative;left:auto;top:auto;transform:none;width:100%;min-width:0;min-height:66px;padding:9px;gap:7px;box-shadow:0 0 0 5px #111210}.sh-tool strong{font-size:12px;overflow-wrap:anywhere}.sh-tool small{font-size:8px}.sh-mark{width:26px;font-size:21px}.sh-wire{opacity:.16}.sh-wire.is-lit{opacity:.6}.sh-explanation{grid-template-columns:1fr;gap:10px;min-height:0}.sh-explanation h4{font-size:24px}.sh-explanation p{font-size:15px}.sh-footer{display:block;font-size:9px}.sh-footer>span{display:block;margin:8px 0}.sh-site-nav>span{display:block}}
@media(prefers-reduced-motion:reduce){.systems-hub *{animation:none!important;transition:none!important}}

@media(min-width:701px){.sh-tool{width:180px}.sh-tool strong{font-size:14px}.sh-tool small{font-size:10px}.sh-mark{width:32px}.sh-site-actions button{font-size:11px}.sh-chrome{font-size:9px}.sh-map{height:550px}.sh-site-status{font-size:9px}}@media(min-width:1001px) and (max-width:1150px){.sh-tool{width:142px}.sh-tool strong{font-size:12px}.sh-tool small{font-size:9px}.sh-mark{width:25px}.sh-map{height:620px}.sh-site-actions button{font-size:10px}}

/* Share the Labs frame; the diagram takes the space left by its controls. */
@media(min-width:1001px){
 #lab-systems{gap:14px}
 #systems-demo{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:12px;flex:1;min-height:0}
 #systems-demo .sh-toolbar{margin:0;gap:15px}
 #systems-demo .sh-map{height:auto;min-height:0;container-type:size}
 #systems-demo .sh-website{top:50%;transform:translateY(-50%)}
 #systems-demo .sh-explanation{min-height:88px;padding-top:14px;gap:24px}
 #systems-demo .sh-explanation h4{font-size:20px;line-height:1.35}
 #systems-demo .sh-explanation p{font-size:14px;line-height:1.6}
 #systems-demo .sh-footer{margin:0;line-height:1.5}
}
@container (max-height:440px){
 .sh-website .sh-chrome{height:24px}
 .sh-website .sh-page{padding:10px 14px}
 .sh-website .sh-site-nav{margin-bottom:8px}
 .sh-website .sh-page h4{font-size:27px;margin:7px 0 13px}
 .sh-website .sh-orbit{top:35px;width:85px;height:85px}
 .sh-website .sh-site-status{margin-top:7px;min-height:0;font-size:8px}
 .sh-website .sh-site-actions button{padding:6px}
}
@container (max-height:350px){
 .sh-website .sh-site-nav{display:none}
 .sh-website .sh-page h4{font-size:24px;margin:5px 0 9px}
 .sh-website .sh-site-status{font-size:7px;line-height:1.4}
 .sh-website .sh-site-actions{flex-direction:row}
 .sh-website .sh-site-actions button{font-size:9px;padding:5px 3px}
 .sh-tool{min-height:54px;padding-block:7px}
}