/* Physical World API: the connection is visible; the mechanics stay abstract. */
.wf{padding:80px var(--gut) 36px;background:#08151c;border-block:1px solid #20323c;scroll-margin-top:76px;overflow:hidden}
.wf-inner{max-width:1200px;margin:auto}
.wf-heading{text-align:center;position:relative;z-index:1}
.wf-heading .kicker{color:#8cabb7;font-size:10px;margin-bottom:18px;letter-spacing:.22em}
.wf h2{font-size:clamp(40px,6.6vw,88px);font-weight:500;letter-spacing:-.06em;line-height:1.06}
.wf h2 em{font-family:Newsreader,serif;font-weight:400;color:#8dd9df}
.wf-universe{position:relative;height:390px;margin:35px auto 0;isolation:isolate}
.wf-universe::before{content:"";position:absolute;inset:-25% 20%;background:radial-gradient(ellipse,#17667724,transparent 65%);pointer-events:none;z-index:-1}
.wf-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.wf-lines-tall{display:none}
.wf-lines path{fill:none;vector-effect:non-scaling-stroke}
.wf-tracks path{stroke:#28434f;stroke-width:1}
.wf-incoming path,.wf-outgoing path{stroke-width:2;stroke-linecap:round;stroke-dasharray:12 100;stroke-dashoffset:112;opacity:0}
.wf-incoming path{stroke:#7cdee4;filter:drop-shadow(0 0 4px #32b7ce)}
.wf-outgoing path{stroke:#efb25e;filter:drop-shadow(0 0 4px #d99237)}
.wf-thing,.wf-possibility{position:absolute;width:112px;transform:translate(-50%,-50%);text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;font:400 12px var(--sans);letter-spacing:.015em}
.wf-node-1{top:16.6667%}.wf-node-2{top:50%}.wf-node-3{top:83.3333%}
.wf-thing{left:10%;border:0;background:#08151c;color:#c6d9df;cursor:pointer;padding:9px;border-radius:20px;transition:color .35s;min-height:100px}
.wf-object-art{display:block;width:64px;height:64px;transition:transform .5s var(--ease),filter .35s}
.wf-object-art svg{width:100%;height:100%;fill:none;stroke:#78a7b7;stroke-width:1.3;stroke-linejoin:round}
.wf-face-top{fill:#315567;stroke:none}.wf-face-left{fill:#112b38;stroke:none}.wf-face-right{fill:#1b3e4d;stroke:none}
.wf-object-art .wf-touch-point{fill:#94e0e3;stroke:none}
.wf-thing:hover,.wf-thing:focus-visible,.wf-thing[aria-pressed=true]{color:#a7edf0}
.wf-thing:hover .wf-object-art,.wf-thing:focus-visible .wf-object-art{transform:translateY(-4px) rotate(-5deg);filter:drop-shadow(0 0 10px #46bdce55)}
.wf-thing[aria-pressed=true] .wf-object-art{filter:drop-shadow(0 0 10px #46bdce55)}
.wf-thing[aria-pressed=true] .wf-object-art svg{stroke:#a7edf0}
.wf-core{position:absolute;left:50%;top:50%;width:144px;height:144px;transform:translate(-50%,-50%)}
.wf-core-disc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:#0b202a;border:1px solid #416470;border-radius:50%;box-shadow:0 0 65px #23708226,inset 0 0 25px #245c6129;transition:box-shadow .5s,border-color .5s}
.wf-core-disc img{width:64px;height:64px}
.wf-core-disc>span{font-size:10px;letter-spacing:.2em;color:#c1dae2;margin-left:3px}
.wf-halo{position:absolute;border:1px solid #294b58;border-radius:50%;pointer-events:none}
.wf-halo-inner{inset:-20px;opacity:.7}.wf-halo-outer{inset:-42px;opacity:.35}
.wf-possibility{left:90%;color:#90a6b0;background:#08151c;padding:10px 0;transition:color .5s}
.wf-output-art{display:grid;place-items:center;width:52px;height:52px;position:relative;transition:color .5s,filter .5s}
.wf-output-art svg{width:35px;height:35px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.wf-output-art::after{content:"";position:absolute;right:-4px;top:4px;width:5px;height:5px;border-radius:50%;background:#efb25e;opacity:0;transform:scale(.5);transition:opacity .3s,transform .3s}
.wf-footer{margin-top:34px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #263e49;padding-top:22px;font-size:11px;color:#819eab}
.wf-footer a{color:#d1e4e6;font-size:13px;text-decoration:none}
.wf-footer a:hover{color:#8fe0e5}.wf-footer a>span{margin-left:8px}
.wf-noscript{margin-top:20px;font-size:12px;color:#b4cbd3}
.wf[data-state=in][data-source=objects] .wf-incoming [data-line=objects],.wf[data-state=in][data-source=places] .wf-incoming [data-line=places],.wf[data-state=in][data-source=products] .wf-incoming [data-line=products]{animation:wf-signal 1.2s linear both}
.wf[data-state=through] .wf-outgoing path{animation:wf-signal 1.35s linear both}
.wf[data-state=through] .wf-halo-inner,.wf[data-state=through] .wf-halo-outer{animation:wf-ripple 1.4s ease-out both}
.wf[data-state=through] .wf-halo-outer{animation-delay:.1s}
.wf[data-state=through] .wf-core-disc,.wf[data-state=connected] .wf-core-disc{border-color:#6cbfc9;box-shadow:0 0 65px #23708259,inset 0 0 25px #245c6155}
.wf[data-state=connected] .wf-possibility{color:#f1cb99}
.wf[data-state=connected] .wf-output-art{filter:drop-shadow(0 0 12px #f5a54035)}
.wf[data-state=connected] .wf-output-art::after{opacity:1;transform:scale(1)}
@keyframes wf-signal{0%{stroke-dashoffset:112;opacity:0}8%{opacity:1}90%{opacity:1}100%{stroke-dashoffset:-12;opacity:0}}
@keyframes wf-ripple{0%{transform:scale(.94);opacity:.8;border-color:#9be7e9}100%{transform:scale(1.15);opacity:.15;border-color:#477a88}}
@media(max-width:720px){
  .wf{padding:58px var(--gut) 28px}.wf-heading .kicker{font-size:9px;margin-bottom:16px}
  .wf h2{max-width:8ch;margin:auto;font-size:clamp(45px,10.2vw,68px)}
  .wf-universe{height:440px;margin:25px -4px 0}.wf-universe::before{inset:10% -10%}
  .wf-lines-wide{display:none}.wf-lines-tall{display:block}
  .wf-thing,.wf-possibility{width:82px;font-size:11px;gap:6px;padding:7px 0;border-radius:14px}
  .wf-thing{top:12.5%;min-height:92px}.wf-possibility{top:87.5%}
  .wf-node-1{left:16.6667%}.wf-node-2{left:50%}.wf-node-3{left:83.3333%}
  .wf-object-art{width:56px;height:56px}.wf-output-art{width:43px;height:43px}.wf-output-art svg{width:31px;height:31px}
  .wf-core{width:126px;height:126px}.wf-core-disc img{width:56px;height:56px}.wf-core-disc>span{font-size:9px}
  .wf-halo-inner{inset:-16px}.wf-halo-outer{inset:-32px}
  .wf-footer{margin-top:28px;font-size:10px;padding-top:20px}.wf-footer a{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.wf *,.wf *::after{animation:none!important;transition:none!important}.wf .wf-object-art{transform:none!important}}

.wf-caption{display:flex;align-items:center;gap:10px}
.wf-motion{display:grid;place-items:center;width:32px;height:32px;padding:6px;border:1px solid #38515e;border-radius:50%;background:transparent;color:#b4cbd3;cursor:pointer}
.wf-motion[hidden]{display:none}.wf-motion:hover{color:#a7edf0;border-color:#75adb9}
.wf-motion svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wf-play-icon{display:none}.wf-motion[data-paused=true] .wf-play-icon{display:block}.wf-motion[data-paused=true] .wf-pause-icon{display:none}
