:root{
  --paper:#f2f1ea;--paper2:#e7e5db;--bright:#f8f7f1;--ink:#1d1e1a;
  --muted:#74766e;--faint:#a1a399;--line:#cbc9bd;--line2:#b5b3a7;
  --sage:#627f71;--clay:#ad705c;--shadow:rgba(28,31,26,.08);
  --serif:Georgia,"Times New Roman",serif;
  --sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"SFMono-Regular","Cascadia Code","Roboto Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{background:#e8e6dc;color:var(--ink)}
body{margin:0;min-width:320px;font-family:var(--sans);line-height:1.5}
button{font:inherit}
.systems{
  padding:clamp(18px,3vw,54px);
  background:
    radial-gradient(circle at 18% 10%,rgba(255,255,255,.62),transparent 28%),
    radial-gradient(circle at 86% 78%,rgba(98,127,113,.07),transparent 31%),
    var(--paper);
}
.shell{width:min(100%,1500px);margin:auto;border:1px solid var(--line);background:rgba(245,244,237,.76);box-shadow:0 22px 70px var(--shadow)}
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em}
.intro{display:grid;grid-template-columns:minmax(140px,.4fr) minmax(420px,1.45fr) minmax(300px,.75fr);gap:clamp(28px,4vw,72px);align-items:end;min-height:360px;padding:clamp(34px,6vw,86px);border-bottom:1px solid var(--line)}
.kicker{align-self:start;display:flex;gap:20px;color:var(--muted);font:13px var(--mono);letter-spacing:.06em;text-transform:uppercase}.kicker b{color:var(--sage);font-weight:400}
.intro h1{max-width:850px;margin:0;font:500 clamp(46px,5.5vw,84px)/.98 var(--serif);letter-spacing:-.045em}
.intro-copy p{max-width:760px;margin:30px 0 0;color:var(--muted);font-size:clamp(17px,1.5vw,22px);line-height:1.62}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0;border:1px solid var(--line);background:var(--line)}
.facts div{min-height:118px;padding:22px 17px 18px;background:rgba(248,247,241,.82)}
.facts dt{margin:0 0 12px;font:34px/1 var(--serif)}.facts dd{margin:0;color:var(--muted);font:12px/1.45 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.atlas{border-bottom:1px solid var(--line)}
.atlas-bar{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:58px;padding:0 26px;border-bottom:1px solid var(--line);color:var(--muted);font:12px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.atlas-bar>div{display:flex;gap:18px}.atlas-bar b{color:var(--sage);font-weight:400}.atlas-bar strong{color:var(--ink);font-weight:400}.atlas-bar p{margin:0;font-family:var(--sans);letter-spacing:.02em;text-transform:none}
.tabs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--line)}
.tab{position:relative;min-height:92px;padding:16px 17px 18px;border:0;border-right:1px solid var(--line);background:rgba(244,243,236,.4);color:var(--muted);text-align:left;cursor:pointer;transition:.18s ease}.tab:last-child{border-right:0}.tab:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}.tab:hover,.tab:focus-visible,.tab[aria-selected=true]{background:rgba(255,255,255,.5);color:var(--ink)}.tab[aria-selected=true]:after{transform:scaleX(1)}.tab:focus-visible{outline:1px solid var(--sage);outline-offset:-4px}.tab i{display:block;margin-bottom:13px;color:var(--accent);font:12px var(--mono);font-style:normal;letter-spacing:.06em}.tab span{display:block;max-width:145px;font:clamp(15px,1.22vw,20px)/1.08 var(--serif)}
.atlas-main{display:grid;grid-template-columns:minmax(0,1.72fr) minmax(330px,.78fr);min-height:650px}
.visual{position:relative;min-width:0;padding:clamp(26px,3vw,46px);border-right:1px solid var(--line);overflow:hidden;background:radial-gradient(circle at 54% 44%,rgba(98,127,113,.05),transparent 38%)}
.diagram{display:block;width:100%;min-height:448px;overflow:visible}.diagram .paper{fill:var(--bright);fill-opacity:.56;stroke:var(--line)}.diagram .dots{fill:url(#dots);opacity:.66}.layer-line{stroke:var(--line);stroke-width:1;stroke-dasharray:2 7}.layer-tick{stroke:var(--line2)}.layer-label{fill:var(--muted);font:13px var(--mono);letter-spacing:.1em}.layer-num{fill:var(--faint);font:12px var(--mono);letter-spacing:.06em}.band{fill:var(--activeFade);opacity:0;transition:opacity .2s}.band.on{opacity:1}.track{fill:none;stroke:var(--line2);stroke-width:1;opacity:.5;transition:.18s;cursor:pointer}.track.on,.track:hover{stroke:var(--active);stroke-width:1.7;opacity:.95}.hit{fill:none;stroke:transparent;stroke-width:24;cursor:pointer}.node{fill:var(--bright);stroke:var(--line2);stroke-width:1;opacity:.8;transform-box:fill-box;transform-origin:center;transition:.18s;cursor:pointer}.node.on{stroke:var(--active);stroke-width:1.7;opacity:1;transform:scale(1.35)}.core{fill:var(--active);opacity:0;transition:.18s}.core.on{opacity:.92}.track-name{fill:var(--muted);font:12px var(--mono);letter-spacing:.05em;cursor:pointer;transition:.18s}.track-name.on{fill:var(--active)}.active-halo{fill:none;stroke:var(--active);stroke-width:9;opacity:.065}.active-route{fill:none;stroke:var(--active);stroke-width:2.3;stroke-linecap:round;stroke-dasharray:7 8;animation:route 8s linear infinite}.feedback{fill:none;stroke:var(--active);stroke-width:1;stroke-dasharray:2 5;opacity:.52;animation:route 10s linear reverse infinite}.signal{fill:var(--active)}.signal-ring{fill:none;stroke:var(--active);stroke-width:1}.svg-label{fill:var(--muted);font:12px var(--mono);letter-spacing:.06em}.feedback-label{fill:var(--active);font:12px var(--mono);letter-spacing:.06em;opacity:.78}
.visual-note{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;margin-top:14px;color:var(--faint);font:12px var(--mono);letter-spacing:.06em;text-transform:uppercase}.visual-note span:nth-child(2){color:var(--muted);text-align:center}.visual-note span:last-child{text-align:right}
.detail{display:flex;min-width:0;flex-direction:column;padding:clamp(34px,4vw,60px);background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 42%),rgba(241,240,232,.5)}
.detail-meta{display:flex;justify-content:space-between;gap:18px;color:var(--muted);font:12px var(--mono);letter-spacing:.06em;text-transform:uppercase}.detail-meta b{color:var(--active);font-weight:400}
.detail h2{margin:44px 0 18px;font:500 clamp(36px,3.7vw,58px)/.98 var(--serif);letter-spacing:-.035em}.summary{margin:0;color:var(--muted);font-size:16px;line-height:1.65}
.route-list{display:grid;margin-top:36px;border-top:1px solid var(--line)}.route-step{display:grid;grid-template-columns:32px minmax(92px,.72fr) minmax(0,1.35fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}.route-step i,.route-step b{font:12px var(--mono);font-style:normal;font-weight:400;letter-spacing:.1em;text-transform:uppercase}.route-step i{color:var(--active)}.route-step b{color:var(--muted)}.route-step span{font-size:12px;line-height:1.45}
.detail-bottom{display:grid;gap:28px;margin-top:auto;padding-top:38px}.label{display:block;margin-bottom:12px;color:var(--muted);font:12px var(--mono);letter-spacing:.06em;text-transform:uppercase}.tags{display:flex;flex-wrap:wrap;gap:7px}.tags span{padding:6px 8px 5px;border:1px solid var(--line);background:rgba(255,255,255,.25);color:var(--active);font:12px/1.15 var(--mono);letter-spacing:.05em;text-transform:uppercase}.tags.quiet span{color:var(--muted);background:transparent}
.foundation{display:grid;grid-template-columns:minmax(220px,.32fr) minmax(0,1fr);min-height:118px;border-top:1px solid var(--line)}.foundation-copy{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:20px 26px;border-right:1px solid var(--line);font:12px var(--mono);letter-spacing:.06em;text-transform:uppercase}.foundation-copy small{max-width:300px;color:var(--muted);font:13px/1.45 var(--sans);letter-spacing:0;text-transform:none}.primitive-rail{display:flex;flex-wrap:wrap;align-content:center;gap:8px;padding:22px 26px;background:repeating-linear-gradient(90deg,transparent 0 35px,rgba(40,45,39,.035) 35px 36px)}.primitive-rail span{position:relative;padding:7px 9px 6px 18px;border:1px solid var(--line);background:rgba(248,247,241,.66);color:var(--muted);font:12px var(--mono);letter-spacing:.06em;text-transform:uppercase;animation:primitive .38s both}.primitive-rail span:before{content:"";position:absolute;left:8px;top:50%;width:4px;height:4px;border-radius:50%;background:var(--active);transform:translateY(-50%)}
.builds{padding:clamp(44px,6vw,88px)}.builds-head{display:grid;grid-template-columns:1fr .75fr;gap:40px;align-items:end;margin-bottom:34px}.builds-head>div{display:flex;align-items:baseline;gap:22px}.builds-head b{color:var(--sage);font:13px var(--mono);font-weight:400;letter-spacing:.06em}.builds-head h2{margin:0;font:500 clamp(42px,4.5vw,70px)/1 var(--serif);letter-spacing:-.04em}.builds-head p{max-width:520px;margin:0 0 4px auto;color:var(--muted);font-size:15px;line-height:1.55}
.cards{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}.card{display:flex;min-height:540px;flex-direction:column;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(244,243,236,.38);overflow:hidden;transition:background .22s}.card:hover{background:rgba(249,248,242,.75)}.card.wide{grid-column:span 7}.card.medium{grid-column:span 5}.card.third{grid-column:span 4}.card-visual{position:relative;display:grid;min-height:245px;place-items:center;border-bottom:1px solid var(--line);overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(98,127,113,.055),transparent 42%)}.card-visual:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(41,45,39,.09) .8px,transparent .9px);background-size:22px 22px;opacity:.6}.card-visual>*{position:relative;z-index:1}.readout{position:absolute;z-index:2;left:18px;bottom:14px;color:var(--muted);font:12px var(--mono);letter-spacing:.06em;text-transform:uppercase}.card-body{display:flex;flex:1;flex-direction:column;padding:28px}.card-meta{display:flex;justify-content:space-between;color:var(--muted);font:12px var(--mono);letter-spacing:.06em;text-transform:uppercase}.card-meta b{color:var(--sage);font-weight:400}.card h3{margin:30px 0 16px;font:500 clamp(30px,3vw,47px)/1 var(--serif);letter-spacing:-.035em}.card p{max-width:680px;margin:0;color:var(--muted);font-size:14px;line-height:1.62}.stack{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:34px}.stack span{padding:5px 7px 4px;border:1px solid var(--line);color:var(--muted);font:12px var(--mono);letter-spacing:.05em;text-transform:uppercase}
/* build diagrams */
.concept{width:88%;height:195px}.concept path{fill:none;stroke:var(--line2);stroke-width:1.1;opacity:.62}.concept circle{fill:var(--bright);stroke:var(--sage);stroke-width:1.2}.concept .pulse{fill:var(--clay);stroke:none}
.orbit{position:relative;width:min(82%,420px);aspect-ratio:1.6}.orbit .hub,.orbit .agent{position:absolute;display:grid;place-items:center;border:1px solid var(--line2);border-radius:50%;background:var(--bright);color:var(--muted);font:12px var(--mono);transform:translate(-50%,-50%)}.orbit .hub{left:50%;top:49%;width:64px;height:64px;border-color:var(--sage);color:var(--sage);z-index:2}.orbit .agent{left:var(--x);top:var(--y);width:26px;height:26px;animation:agent 4.6s var(--delay) ease-in-out infinite}.orbit:before,.orbit:after{content:"";position:absolute;left:50%;top:49%;width:76%;height:1px;background:var(--line2);opacity:.55;transform-origin:center}.orbit:before{transform:translate(-50%,-50%) rotate(25deg)}.orbit:after{transform:translate(-50%,-50%) rotate(-34deg)}.ring{position:absolute;left:50%;top:49%;border:1px dashed var(--line2);border-radius:50%;transform:translate(-50%,-50%);animation:spin 16s linear infinite}.ring.one{width:54%;aspect-ratio:1}.ring.two{width:86%;aspect-ratio:1.7;animation-duration:22s;animation-direction:reverse}
.commerce{display:grid;grid-template-columns:.62fr .44fr 1.6fr .7fr;gap:16px;align-items:center;width:84%;height:72%}.source{display:grid;gap:9px}.source i{height:19px;border:1px solid var(--line2);background:rgba(255,255,255,.24)}.flows{display:grid;gap:17px}.flows i{position:relative;height:1px;background:var(--line2)}.flows i:after{content:"";position:absolute;top:-2px;left:0;width:5px;height:5px;border-radius:50%;background:var(--clay);animation:packet 3.2s linear infinite}.flows i:nth-child(2):after{animation-delay:-1.1s}.flows i:nth-child(3):after{animation-delay:-2.1s}.store{display:grid;gap:9px;min-height:142px;padding:12px;border:1px solid var(--sage);background:rgba(255,255,255,.28)}.nav{height:10px;border-bottom:1px solid var(--line)}.hero{height:58px;background:linear-gradient(115deg,rgba(98,127,113,.12),rgba(173,112,92,.08)),repeating-linear-gradient(90deg,transparent 0 19px,rgba(40,45,39,.04) 19px 20px)}.products{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.products i{height:31px;border:1px solid var(--line)}.chart{display:flex;height:112px;gap:5px;align-items:end;border-bottom:1px solid var(--line2)}.chart i{flex:1;height:var(--h);border:1px solid var(--line2);background:rgba(98,127,113,.14);transform-origin:bottom;animation:bars 5s ease-in-out infinite alternate}.chart i:nth-child(1){--h:28%;animation-delay:-2s}.chart i:nth-child(2){--h:48%;animation-delay:-1s}.chart i:nth-child(3){--h:62%;animation-delay:-3s}.chart i:nth-child(4){--h:78%;animation-delay:-.4s}.chart i:nth-child(5){--h:92%;animation-delay:-2.6s}
.world{width:92%;height:200px}.world .contour{fill:none;stroke:var(--line2);stroke-width:1;opacity:.52}.world .route{fill:none;stroke:var(--clay);stroke-width:1.25;stroke-dasharray:4 5;opacity:.76}.world .mark{fill:var(--bright);stroke:var(--sage);stroke-width:1.1}.world .traveler{fill:var(--sage);stroke:none}
.tools{position:relative;display:grid;grid-template-columns:repeat(3,minmax(50px,92px));gap:13px}.tool{position:relative;aspect-ratio:1.36;border:1px solid var(--line2);background:rgba(255,255,255,.24)}.tool:before{content:attr(data-tool);position:absolute;left:8px;bottom:7px;color:var(--muted);font:12px var(--mono);letter-spacing:.05em;text-transform:uppercase}.tool:after{content:"";position:absolute;left:8px;top:8px;width:18px;height:18px;border:1px solid var(--sage);border-radius:50%;opacity:.75}.wire{position:absolute;height:1px;background:var(--clay);opacity:.56;animation:wire 3.4s ease-in-out infinite}.wire.a{left:24%;top:24%;width:51%}.wire.b{left:18%;top:74%;width:63%}.wire.c{left:52%;top:25%;width:1px;height:49%}
@keyframes route{to{stroke-dashoffset:-120}}@keyframes primitive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes agent{50%{box-shadow:0 0 0 7px rgba(98,127,113,.09)}}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes packet{to{left:calc(100% - 5px)}}@keyframes bars{from{transform:scaleY(.72);opacity:.56}to{transform:scaleY(1);opacity:1}}@keyframes wire{50%{opacity:.9}}
@media(max-width:1180px){.intro{grid-template-columns:120px minmax(0,1fr)}.facts{grid-column:2;width:min(100%,520px)}.tabs{grid-template-columns:repeat(4,1fr)}.tab:nth-child(4){border-right:0}.tab:nth-child(n+5){border-top:1px solid var(--line)}.atlas-main{grid-template-columns:1fr}.visual{border-right:0;border-bottom:1px solid var(--line)}.detail{min-height:620px}}
@media(max-width:860px){.systems{padding:0}.shell{border-left:0;border-right:0}.intro{grid-template-columns:1fr;min-height:0}.facts{grid-column:auto;width:100%}.atlas-bar{align-items:flex-start;flex-direction:column;padding-top:16px;padding-bottom:16px}.tabs{grid-template-columns:repeat(2,1fr)}.tab,.tab:nth-child(4){border-right:1px solid var(--line)}.tab:nth-child(even){border-right:0}.tab:nth-child(n+3){border-top:1px solid var(--line)}.visual{overflow-x:auto}.diagram,.visual-note{min-width:760px}.foundation{grid-template-columns:1fr}.foundation-copy{border-right:0;border-bottom:1px solid var(--line)}.builds-head{grid-template-columns:1fr}.builds-head p{margin-left:0}.card.wide,.card.medium,.card.third{grid-column:span 12}}
@media(max-width:560px){.intro,.builds{padding:28px 20px 40px}.intro h1{font-size:43px}.intro-copy p{font-size:16px}.facts{grid-template-columns:1fr}.facts div{min-height:80px}.tabs{grid-template-columns:1fr}.tab,.tab:nth-child(even),.tab:nth-child(4){border-right:0;border-top:1px solid var(--line)}.tab:first-child{border-top:0}.detail{padding:30px 20px 38px}.route-step{grid-template-columns:26px 1fr}.route-step span{grid-column:2}.foundation-copy,.primitive-rail{padding-left:20px;padding-right:20px}.builds-head>div{align-items:flex-start;flex-direction:column;gap:10px}.card{min-height:520px}.card-visual{min-height:220px}.card-body{padding:24px 20px}.commerce{grid-template-columns:.52fr .35fr 1.45fr}.chart{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}


/* ── legibility + colour pass ────────────────────────────────────────────────
   Nothing on this page is allowed below 12px. Raising the mono labels from
   7–10px meant widening the columns that hold them and cutting the display
   sizes so the scale has a middle instead of two extremes. Colour comes from
   the palette that was already declared and barely used. */
:root{
  --paper:#f0eee5;--paper2:#e4e1d5;--bright:#faf9f4;
  --sage:#4f7362;--sage-soft:#dfe7e1;--clay:#a4593f;--clay-soft:#f0e2da;
  --ink:#191a16;--muted:#5f625a;--faint:#83867c;--line:#c4c2b5;--line2:#a9a79a;
}
.systems{background:
  radial-gradient(circle at 16% 8%,rgba(255,255,255,.7),transparent 30%),
  radial-gradient(circle at 88% 76%,rgba(79,115,98,.10),transparent 34%),
  var(--paper);}
.shell{background:rgba(250,249,244,.82)}

/* display scale: was 84 / 70 / 58 / 47 against 8px labels */
.intro h1{font-size:clamp(38px,4.2vw,62px)}
.intro-copy p{font-size:clamp(17px,1.35vw,20px);line-height:1.6}
.builds-head h2{font-size:clamp(32px,3.2vw,48px)}
.detail h2{font-size:clamp(28px,2.7vw,40px)}
.card h3{font-size:clamp(24px,2.1vw,33px)}
.facts dt{font-size:32px;color:var(--sage)}
.facts dd{font-size:12px;line-height:1.45}
.facts div{min-height:126px}

/* the mono labels are 12–13px now, so the columns holding them need width */
.route-step{grid-template-columns:34px minmax(124px,.8fr) minmax(0,1.3fr);gap:14px;padding:15px 0}
.route-step span{font-size:14px;line-height:1.5}
.route-step i{color:var(--clay)}
.tab{min-height:104px;padding:18px 18px 20px}
.tab i{color:var(--clay)}
.atlas-bar{min-height:66px;padding:0 26px;gap:28px}
.atlas-bar p{font-size:13px}
.kicker b,.builds-head b,.card-meta b,.atlas-bar b{color:var(--clay)}
.summary{font-size:16px;line-height:1.62}
.card p{font-size:15px;line-height:1.6}
.builds-head p{font-size:15px}
.foundation-copy small{font-size:13px;line-height:1.5}
.visual-note{font-size:12px}
.tags span,.stack span,.primitive-rail span{padding:7px 10px 6px;font-size:12px;line-height:1.2}
.tags.quiet span{color:var(--muted)}
.readout{left:20px;bottom:16px;font-size:12px;color:var(--muted)}
.label{font-size:12px;margin-bottom:14px}
.detail-meta,.card-meta,.kicker,.builds-head b,.foundation-copy{font-size:12px}

/* colour, so the page is not seven shades of paper */
.card-visual{background:radial-gradient(circle at 50% 45%,var(--sage-soft),transparent 62%)}
.card.medium .card-visual,.card.third:nth-of-type(4) .card-visual{
  background:radial-gradient(circle at 50% 45%,var(--clay-soft),transparent 62%)}
.foundation-copy{background:var(--sage-soft)}
.primitive-rail span:before{width:5px;height:5px}
.intro{border-bottom:1px solid var(--line2)}

/* SVG type also has a floor */
.layer-label{font-size:12px}.layer-num{font-size:12px}
.track-name{font-size:12px}.svg-label{font-size:12px}.feedback-label{font-size:12px}

/* the diagram is 448 tall in a 650 box, which left a dead half-screen under it */
.atlas-main{min-height:0}
.visual{padding-bottom:clamp(20px,2vw,30px)}
.diagram{min-height:0}
/* layer captions wrap onto two lines at 12px and collided with their neighbour */
.layer-label{font-size:12px}
.svg-label{font-size:12px}