/* Reference: continuous dark logo rail between quiet ivory editorial bands. */
.ecosystem{--eco-paper:#eeeae0;--eco-ink:#0b0d0c;--eco-copper:#a56d52;position:relative;isolation:isolate;background:var(--eco-paper);color:#5d605a;overflow:hidden;padding:28px 0 0;border-block:1px solid #38392f14;font-family:var(--font-mono,monospace)}
.ecosystem-intro{margin:0 var(--gutter,6vw) 28px;padding:22px 0;border-block:1px solid #35392e20;display:flex;align-items:center;gap:36px;flex-wrap:wrap}
.ecosystem-intro h2,.ecosystem-intro p{font:600 10px/1.6 var(--font-mono,monospace);letter-spacing:1.35px;margin:0}
.ecosystem-intro h2{color:#715441}.ecosystem-intro i{color:var(--eco-copper);font-style:normal;padding:0 20px}
.ecosystem-window{position:relative;background:var(--eco-ink);overflow-x:auto;touch-action:pan-y}
.ecosystem-window:before,.ecosystem-window:after{content:"";position:absolute;z-index:2;top:0;bottom:0;width:clamp(20px,3.3vw,64px);pointer-events:none;background:linear-gradient(90deg,#eeeae0d9 0%,#eeeae098 17%,#eeeae045 44%,#eeeae000 100%)}
.ecosystem-window:before{left:0}.ecosystem-window:after{right:0;transform:scaleX(-1)}
.ecosystem-track{display:flex;width:max-content;will-change:transform;animation:ecosystem-drift var(--ecosystem-duration,120s) linear infinite;animation-play-state:paused}
.ecosystem[data-running="true"] .ecosystem-track{animation-play-state:running}
.ecosystem-group{display:flex;flex:none;list-style:none;margin:0;padding:0}
.ecosystem-tile{box-sizing:border-box;width:clamp(230px,16.67vw,320px);height:164px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:22px 18px;border-right:1px solid #ffffff13;background:transparent;transition:background-color .35s ease}
.ecosystem-tile:hover{background:#211712}
.ecosystem-role{font-size:9px;letter-spacing:1.15px;color:#b18b73;font-weight:600;line-height:1.3;text-align:center}
.ecosystem-brand{display:flex;align-items:center;justify-content:center;gap:12px;color:#bfc0ba;font:600 35px/1.1 Arial,sans-serif;letter-spacing:-1.1px;white-space:nowrap;transition:color .35s ease,transform .45s cubic-bezier(.2,.75,.2,1)}
.ecosystem-tile:hover .ecosystem-brand{color:#f0ece3;transform:scale(1.035)}
.ecosystem-brand img{display:block;object-fit:contain;filter:brightness(0) invert(1);opacity:.72;width:34px;height:34px;transition:opacity .35s}.ecosystem-tile:hover img{opacity:.95}
.ecosystem-code{font-family:var(--font-mono,monospace);font-weight:700;font-size:30px;letter-spacing:-1.8px}.ecosystem-code b{font-size:30px;font-weight:500}.ecosystem-serif{font-family:Georgia,serif;font-weight:400;letter-spacing:-1px}.ecosystem-small{font-size:29px}.ecosystem-ollama{font-weight:500;letter-spacing:-2px;font-size:40px}.ecosystem-groq{font-size:44px;font-weight:400;letter-spacing:-3px}.ecosystem-xai{font-size:47px;font-weight:500;letter-spacing:-3px}.ecosystem-deepseek{font-weight:600;letter-spacing:-1.8px;font-size:32px}.ecosystem-deepgram{font-size:30px;letter-spacing:-1.5px}
.ecosystem-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:49px;padding:10px var(--gutter,6vw);background:var(--eco-ink);border-top:1px solid #ffffff13;color:#9b9e95;font-size:8px;letter-spacing:1.2px;font-weight:600}
.ecosystem-controls button{font:600 10px/1.4 Arial,sans-serif;letter-spacing:0;color:#dddcd4;background:none;border:0;border-bottom:1px solid #dddcd470;padding:5px 0;cursor:pointer;min-height:32px;white-space:nowrap}
.ecosystem-controls button:focus-visible{outline:2px solid #df9a6c;outline-offset:6px}
.ecosystem-caption{display:flex;align-items:center;gap:45px;padding:24px var(--gutter,6vw);min-height:74px;box-sizing:border-box}.ecosystem-caption strong{color:#9a654e;font-size:9px;letter-spacing:1px;white-space:nowrap}.ecosystem-caption p{font:11px/1.65 Arial,sans-serif;margin:0;max-width:760px;color:#737368}
@keyframes ecosystem-drift{to{transform:translate3d(-50%,0,0)}}
@media(max-width:600px){.ecosystem{padding-top:18px}.ecosystem-intro{gap:10px;margin-bottom:18px;padding:14px 0}.ecosystem-intro h2,.ecosystem-intro p{font-size:8px;letter-spacing:.8px}.ecosystem-intro i{padding:0 6px}.ecosystem-tile{width:230px;height:144px;gap:18px}.ecosystem-caption{align-items:start;flex-direction:column;gap:10px;padding-block:20px}.ecosystem-controls{font-size:7px;letter-spacing:.7px}}
@media(prefers-reduced-motion:reduce){.ecosystem-track{animation:none!important;transform:none!important;will-change:auto}.ecosystem-window{overflow-x:auto;touch-action:pan-x pan-y;scrollbar-width:thin;scrollbar-color:#a56d52 #0b0d0c}.ecosystem-group[aria-hidden]{display:none}.ecosystem-tile,.ecosystem-brand{transition:none}}

.ecosystem[data-enhanced="true"] .ecosystem-window{overflow-x:hidden}@media(prefers-reduced-motion:reduce){.ecosystem[data-enhanced="true"] .ecosystem-window{overflow-x:auto}}
/* Keep neighboring spatial scenes out of the reference's clear logo band. */
body.ecosystem-visible #webgl-stage{opacity:0!important}

body.ecosystem-visible #globalFireflies,body.ecosystem-visible #globalTrail{visibility:hidden}
@media(prefers-reduced-motion:reduce){.ecosystem-window{touch-action:auto}}
/* Light follows the lettering, while the tile stays black. */
.ecosystem-brand{color:#767873;text-shadow:none;transition:color .3s ease,text-shadow .3s ease}
.ecosystem-brand img{opacity:.43;transition:opacity .3s ease,filter .3s ease}
.ecosystem-tile:hover{background:transparent}
.ecosystem-tile:hover .ecosystem-brand{transform:none}
@media(hover:hover){
.ecosystem-tile:hover .ecosystem-brand{color:#fff;text-shadow:0 0 8px #ffffff66,0 0 22px #ffffff33}
.ecosystem-tile:hover img{opacity:1;filter:brightness(0) invert(1) drop-shadow(0 0 6px #ffffff66)}
}
@media(prefers-reduced-motion:reduce){.ecosystem-brand,.ecosystem-brand img{transition:none}}