/* The product emerges from the same forest world as Problem and How it works. */
#system{background:#0e1410;color:#e7ecdf;scroll-margin-top:0;--runtime-reveal:1;--console-reveal:1;--system-shift:0px;--node-scale:1;--node-focus:0;--panel-shift:0px}
#system .system-stage{position:relative;overflow:clip;background:radial-gradient(ellipse at 40% 50%,#70865b10,transparent 65%),#0e1410}
#system .system-inner{padding-block:100px 40px}
#system .system-kicker{display:flex;justify-content:space-between;gap:20px;font:10px/1.5 ui-monospace,monospace;letter-spacing:.09em;color:#a8b39e}
#system .system-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin:24px 0 24px;flex-shrink:0}
#system h2{font:400 clamp(34px,3.6vw,54px)/1.07 'Space Grotesk',sans-serif;letter-spacing:-.055em}
#system h2 span{color:#a6b59a}
#system .system-intro>p{max-width:310px;font-size:13px;line-height:1.75;color:#b4c2aa;padding-bottom:4px}
#system .system-scene{position:relative;isolation:isolate;display:grid;grid-template-columns:56% 44%;min-height:460px;flex:1;border:1px solid #c9dfb522;border-radius:12px;overflow:hidden;background:#101712}
#system .system-scene-grid{position:absolute;inset:0;background:radial-gradient(#c9dfb51a .65px,transparent .8px);background-size:7px 7px;opacity:.7;z-index:-1}
#system .system-node{position:relative;margin:0;min-width:0;isolation:isolate;z-index:2}
#system .system-foundation{position:absolute;inset:155px 26px 46px;transform:translateY(calc(var(--system-shift)*.25));isolation:isolate}
#system .foundation-boundary{position:absolute;inset:0;border:1px dashed #bdcfa73d;border-radius:16px;background:radial-gradient(ellipse at 50% 45%,#8eaa6920,transparent 65%)}
#system .foundation-boundary-label,#system .foundation-boundary-foot{position:absolute;left:18px;font:8px/1.5 ui-monospace,monospace;letter-spacing:.08em;color:#a8b99a}
#system .foundation-boundary-label{top:13px}
#system .foundation-boundary-foot{bottom:12px;font-size:7px;letter-spacing:.04em}
#system .foundation-routes{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#system .foundation-routes path{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
#system .foundation-route-base{stroke:#c2dba62e}
#system .foundation-route-active{stroke:#c2dba6;stroke-dasharray:1;stroke-dashoffset:calc((1 - var(--runtime-reveal))*.7);opacity:.8}
#system .foundation-routes circle{fill:#d0e5b7;opacity:calc(.4 + var(--runtime-reveal)*.6)}
#system .foundation-unit{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:112px;height:104px;padding:12px 8px;border:1px solid #b7c99f45;border-radius:8px;background:linear-gradient(135deg,#26342bf5,#15231cf5);box-shadow:0 12px 30px #030c0840;transform:translate(-50%,-50%)}
#system .foundation-unit strong{font-size:13px;font-weight:400;line-height:1.2;color:#e0e9d6}
#system .foundation-unit small{font-size:9px;color:#b1c29f;line-height:1.35;text-align:center}
#system .foundation-connect{left:18.3%;top:55%}
#system .foundation-compute{left:50%;top:39%;width:140px;height:138px;border-color:#cfdfb766;background:linear-gradient(140deg,#334433,#223328);box-shadow:0 20px 40px #0005,0 0 40px #b8d9940c}
#system .foundation-storage{left:82%;top:70%}
#system .foundation-symbol{width:44px;height:25px;margin-bottom:1px;flex-shrink:0}
#system .foundation-symbol path{fill:none;stroke:#b5cca0;stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round}
#system .foundation-symbol .foundation-symbol-muted{stroke:#b5cca055}
#system .foundation-matrix{display:grid;grid-template-columns:repeat(3,8px);gap:5px;margin:0 0 3px}
#system .foundation-matrix i{height:8px;border:1px solid #bed6a35e;border-radius:2px;background:#a9c78722}
#system .foundation-matrix i:nth-child(2n){background:#b6d391;opacity:calc(.35 + var(--runtime-reveal)*.65)}
#system .system-node figcaption{position:absolute;top:28px;left:32px;right:20px;z-index:1}
#system .system-mini-label{font:8px/1.5 ui-monospace,monospace;letter-spacing:.08em;color:#a8bca0}
#system .system-node h3{font-size:30px;font-weight:400;letter-spacing:-.045em;margin-top:8px}
#system .system-node p{font-size:12px;line-height:1.6;color:#b7c4ab;margin-top:7px}
#system .system-node figcaption>small{display:table;font-size:10px;color:#b6c4aa;line-height:1.5;margin-top:10px;background:#101712d9;border-radius:3px;padding:2px 5px;margin-left:-5px}
#system .system-link{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
#system .system-link path{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
#system .system-link-base{stroke:#bbd79a25}
#system .system-link-light{stroke:#bdd6a1;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--runtime-reveal));opacity:var(--runtime-reveal)}
#system .system-software{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:26px 30px 30px 22px;min-width:0;min-height:0}
#system .system-runtime,#system .system-console{border:1px solid #c9dfb538;border-radius:8px;padding:18px 20px;background:linear-gradient(125deg,#23362af5,#17251eef);box-shadow:0 12px 30px #06100a30;transform:translateY(var(--panel-shift))}
#system .system-runtime{opacity:var(--runtime-reveal)}
#system .system-panel-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
#system .system-local-dot{font:8px ui-monospace,monospace;letter-spacing:.06em;color:#c3d6ad;display:flex;align-items:center;gap:6px}
#system .system-local-dot:before{content:'';height:4px;width:4px;border-radius:50%;background:#c3d6ad}
#system .system-runtime h3{font-weight:400;font-size:24px;letter-spacing:-.04em;margin:8px 0 6px}
#system .system-runtime>p,#system .system-console>p{font-size:11px;line-height:1.6;color:#b9c8ad}
#system .system-runtime-layers{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:5px}
#system .system-runtime-layers li{display:flex;gap:10px;align-items:center;border:1px solid #c9dfb51a;border-radius:4px;background:#d9ecc105;padding:9px 10px;font-size:11px;color:#d6e1ca}
#system .system-layer-icon{color:#b8ce9f;font-size:16px;line-height:1;width:15px;text-align:center}
#system .system-runtime-layers small{font:7px ui-monospace,monospace;color:#a8bd97;margin-left:auto;letter-spacing:.04em}
#system .system-console{opacity:var(--console-reveal);transform:translateY(calc(var(--panel-shift) + (1 - var(--console-reveal))*16px));background:linear-gradient(110deg,#25372df5,#1b2c23f5)}
#system .system-console h3{font-size:14px;font-weight:400;letter-spacing:-.025em}
#system .system-console>p{margin-top:6px}
#system .system-console-body{display:flex;gap:16px;align-items:center;margin:14px 0 12px}
#system .system-console-chart{width:45%;flex-shrink:0;font-size:8px;line-height:1}
#system .system-console-chart>span{font:7px ui-monospace,monospace;color:#adbe9f;letter-spacing:.06em}
#system .system-console-chart svg{display:block;width:100%;height:46px;margin-top:5px;overflow:visible}
#system .system-chart-guide{fill:none;stroke:#c4d6b026;stroke-width:1}
#system .system-chart-line{fill:none;stroke:#c3dca6;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--console-reveal));vector-effect:non-scaling-stroke}
#system .system-advisory{display:flex;gap:9px;align-items:flex-start}
#system .system-advisory-mark{color:#c7dcac;font-size:16px;line-height:1}
#system .system-advisory strong{display:block;font-size:11px;line-height:1.4;font-weight:400}
#system .system-advisory small{display:block;color:#aebea1;font-size:9px;line-height:1.5;margin-top:4px}
#system .system-console-foot{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #c9dfb51c;padding-top:10px;font:7px/1.5 ui-monospace,monospace;color:#becdad}
#system .system-scene-caption{position:absolute;bottom:23px;left:32px;font:8px ui-monospace,monospace;letter-spacing:.1em;color:#a0b394}
#system .system-selectors{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px;flex-shrink:0}
#system .system-selectors button{position:relative;display:grid;grid-template-columns:22px 1fr;gap:5px 10px;text-align:left;padding:14px 0 4px;border:0;border-top:1px solid #bcd2a533;border-radius:0;color:#91a186;background:none;font-family:'Space Grotesk',sans-serif;cursor:pointer;transition:color .25s,border-color .25s}
#system .system-selectors button>span{font:9px ui-monospace,monospace;grid-row:span 2;padding-top:3px}
#system .system-selectors strong{font-size:14px;font-weight:400}
#system .system-selectors small{font-size:10px;line-height:1.5}
#system .system-selectors button[aria-pressed='true']{border-color:#d2e4ba;color:#e0ead6}
#system .system-selectors button:hover{color:#e0ead6}
#system .system-selectors button:focus-visible{outline:2px solid #d2e4ba;outline-offset:6px}
#system .system-progress-note{margin-top:22px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:10px;line-height:1.6;color:#a9b79e;flex-shrink:0}
#system .system-progress-note>span{width:4px;height:4px;flex-shrink:0;background:#b7cc9e;border-radius:50%}
#system[data-system-mode='scrub']{height:220svh}
#system[data-system-mode='scrub'] .system-stage{height:100svh;position:sticky;top:0}
#system[data-system-mode='scrub'] .system-inner{display:flex;flex-direction:column;height:100%;padding-block:96px 24px}
#system[data-system-mode='scrub'] .system-scene{min-height:0}
#system:not([data-system-mode='scrub']) .system-selectors{display:none}
@media(min-width:801px) and (max-height:800px){
  #system[data-system-mode='scrub'] .system-inner{padding-block:86px 20px}
  #system .system-intro{margin:18px 0}
  #system h2{font-size:38px}
  #system .system-intro>p{font-size:12px}
  #system .system-software{gap:9px;padding-block:16px}
  #system .system-runtime,#system .system-console{padding:12px 16px}
  #system .system-runtime h3{font-size:21px;margin-block:6px}
  #system .system-runtime>p{display:none}
  #system .system-runtime-layers{margin-top:10px;gap:3px}
  #system .system-runtime-layers li{padding:4px 9px}
  #system .system-console-body{margin-block:8px}
  #system .system-console-chart svg{height:34px}
  #system .system-selectors{margin-top:16px}
  #system .system-progress-note{margin-top:16px}
  #system .system-foundation{inset:145px 24px 40px}
  #system .foundation-unit{height:78px;width:100px;gap:5px}
  #system .foundation-compute{height:110px;width:125px}
  #system .foundation-symbol{height:17px}
}
@media(max-width:1000px) and (min-width:801px){
  #system h2{font-size:38px}
  #system .system-intro>p{max-width:245px;font-size:12px}
  #system .system-scene{grid-template-columns:50% 50%}
  #system .system-software{padding:14px 20px 18px 0}
  #system .system-node figcaption{left:24px}
  #system .system-node h3{font-size:26px}
  #system .system-node p{max-width:330px;font-size:11px}
  #system .system-scene-caption{left:24px;font-size:7px}
  #system .system-foundation{top:160px}
  #system .foundation-unit{width:85px;height:84px;padding:8px 6px;gap:5px}
  #system .foundation-compute{width:100px;height:106px}
  #system .foundation-unit strong{font-size:11px}
  #system .foundation-unit small{font-size:8px}
  #system .foundation-boundary-foot{display:none}
  #system .foundation-connect{top:53%}
  #system .foundation-storage{top:62%}
}
@media(max-width:800px){
  #system .system-inner{padding-block:80px 36px}
  #system .system-kicker{font-size:8px}
  #system .system-intro{display:block;margin:20px 0}
  #system h2{font-size:clamp(30px,6.8vw,44px);line-height:1.08}
  #system .system-intro>p{font-size:12px;max-width:420px;line-height:1.6;margin-top:13px;padding:0}
  #system .system-scene{display:flex;flex-direction:column;min-height:640px}
  #system .system-node{flex:1;min-height:310px}
  #system .system-foundation{inset:124px 14px 16px}
  #system .foundation-unit{width:80px;height:78px;gap:5px;padding:9px 5px}
  #system .foundation-compute{width:92px;height:104px}
  #system .foundation-unit strong{font-size:11px}
  #system .foundation-unit small{font-size:8px}
  #system .foundation-symbol{width:31px;height:19px}
  #system .foundation-matrix{grid-template-columns:repeat(3,6px);gap:3px}
  #system .foundation-matrix i{height:6px}
  #system .foundation-connect{left:17%;top:57%}
  #system .foundation-compute{top:41%}
  #system .foundation-storage{left:83%;top:62%}
  #system .foundation-boundary-label{left:11px;top:10px;font-size:7px}
  #system .foundation-boundary-foot{left:11px;bottom:9px;font-size:6px}
  #system .system-node figcaption{left:19px;top:18px}
  #system .system-node h3{font-size:23px;margin-top:5px}
  #system .system-node p{font-size:10px;margin-top:4px;max-width:260px}
  #system .system-node figcaption>small{position:static;font-size:8px;margin-top:7px}
  #system .system-mini-label{font-size:8px}
  #system .system-link,#system .system-scene-caption{display:none}
  #system .system-software{flex:0 0 auto;gap:9px;padding:0 14px 14px}
  #system .system-runtime,#system .system-console{padding:12px 14px}
  #system .system-runtime h3{font-size:20px;margin-block:5px}
  #system .system-runtime>p,#system .system-console>p{font-size:10px}
  #system .system-runtime-layers{margin-top:10px;gap:4px}
  #system .system-runtime-layers li{padding:6px 8px;font-size:10px}
  #system .system-runtime-layers small{font-size:8px}
  #system .system-console-body{margin-block:9px}
  #system .system-console-chart svg{height:32px}
  #system .system-console-foot{font-size:8px;padding-top:8px}
  #system .system-console-chart>span{font-size:8px}
  #system .system-selectors{gap:14px;margin-top:16px}
  #system .system-selectors button{grid-template-columns:1fr;gap:6px;padding-top:11px}
  #system .system-selectors button>span{grid-row:auto;font-size:8px;padding:0}
  #system .system-selectors strong{font-size:12px}
  #system .system-selectors small{display:none}
  #system .system-progress-note{font-size:9px;text-align:center;margin-top:17px;gap:8px}
  #system[data-system-mode='scrub']{height:210svh}
  #system[data-system-mode='scrub'] .system-inner{padding-block:84px 20px}
  #system[data-system-mode='scrub'] .system-scene{min-height:0;display:block}
  #system[data-system-mode='scrub'] .system-node{position:absolute;inset:0 0 52%;min-height:0}
  #system[data-system-mode='scrub'] .system-foundation{inset:94px 14px -3px;transform:translateY(calc(var(--node-focus)*35px))}
  #system[data-system-mode='scrub'] .foundation-boundary-label{display:none}
  #system[data-system-mode='scrub'] .foundation-boundary-foot{display:none}
  #system[data-system-mode='scrub'] .foundation-unit{height:66px}
  #system[data-system-mode='scrub'] .foundation-unit small{display:none}
  #system[data-system-mode='scrub'] .foundation-connect,#system[data-system-mode='scrub'] .foundation-storage{top:46%}
  #system[data-system-mode='scrub'] .foundation-compute{height:88px;top:39%}
  #system[data-system-mode='scrub'] .system-node p{display:none}
  #system[data-system-mode='scrub'] .system-node figcaption>small{position:static;font-size:8px;margin-top:6px}
  #system[data-system-mode='scrub'] .system-software{position:absolute;inset:43% 0 0;padding:0 14px 14px;justify-content:flex-end}
  #system[data-system-mode='scrub'] .system-runtime{padding:10px 12px}
  #system[data-system-mode='scrub'] .system-runtime>p{display:none}
  #system[data-system-mode='scrub'] .system-runtime-layers{display:flex;gap:5px;margin-top:8px}
  #system[data-system-mode='scrub'] .system-runtime-layers li{flex:1;min-width:0;display:block;padding:7px 5px;font-size:9px;line-height:1.4}
  #system[data-system-mode='scrub'] .system-layer-icon{display:none}
  #system[data-system-mode='scrub'] .system-runtime-layers small{display:none}
  #system[data-system-mode='scrub'] .system-runtime h3{font-size:18px}
  #system[data-system-mode='scrub'] .system-console>p{display:none}
  #system[data-system-mode='scrub'] .system-console{padding:11px 12px}
}
@media(min-width:600px) and (max-width:800px){#system[data-system-mode='scrub'] .system-inner{padding-top:100px}}
@media(prefers-reduced-motion:reduce){#system *{transition:none!important}}