@layer reset, base, layout, components, responsive;
@layer reset {
  *,*::before,*::after{
    box-sizing:border-box
  }
  body,h1,h2,h3,p{
    margin:0
  }
  button{
    font:inherit
  }
  button,summary{
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent
  }
  button{
    cursor:pointer
  }
  button,a,summary{
    outline-offset:5px
  }
}
@layer base {
  :root{
    --ink:#171717;
    --muted:#646464;
    --line:#dedede;
    --ease:cubic-bezier(.22,.68,0,1);
    font-family:Inter,"Helvetica Neue",Arial,sans-serif;
    color:var(--ink);
    background:#fff;
    font-synthesis:none
  }
  body{
    font-size:1rem;
    line-height:1.5
  }
  html.drawer-open{
    overflow:hidden
  }
  .drawer-open body{
    position:fixed;
    top:calc(-1 * var(--page-scroll-y));
    left:0;
    width:calc(100% - var(--scrollbar-width));
    overflow:hidden
  }
  h1,h2,h3{
    font-weight:550;
    line-height:1.18;
    letter-spacing:-.025em;
    text-wrap:balance
  }
  h1{
    font-size:2rem;
    letter-spacing:-.045em
  }
  p{
    text-wrap:pretty
  }
  a{
    color:inherit;
    text-underline-offset:4px
  }
  a:hover{
    text-decoration-thickness:2px
  }
  :focus-visible{
    outline:2px solid #161616
  }
  ::selection{
    background:#333;
    color:#fff
  }
  .eyebrow{
    display:block;
    font-size:.75rem;
    color:var(--muted);
    letter-spacing:.065em;
    text-transform:uppercase
  }
  .skip-link{
    position:fixed;
    z-index:10;
    top:8px;
    left:8px;
    transform:translateY(-150%);
    padding:12px;
    background:#fff
  }
  .skip-link:focus{
    transform:none
  }
}
@layer layout {
  .site-header,main{
    max-width:1500px;
    margin:0 auto
  }
  .site-header{
    height:68px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:0 42px;
    border-bottom:1px solid var(--line)
  }
  main{
    padding:0 42px
  }
  .brand{
    display:flex;
    gap:17px;
    align-items:center;
    font-size:1.125rem
  }
  .wordmark{
    font-weight:650;
    letter-spacing:-.055em
  }
  .brand-cross{
    font-weight:300;
    font-size:1.25rem;
    color:#9a9a9a
  }
  .header-note{
    font-size:.75rem;
    color:var(--muted)
  }
  .section-intro{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:28px;
    padding:28px 0 24px
  }
  .section-intro p{
    font-size:1rem;
    color:var(--muted);
    margin-top:7px
  }
  .diagram{
    position:relative;
    display:grid;
    grid-template-columns:164px minmax(0,1fr);
    gap:30px;
    isolation:isolate
  }
  .source-stack{
    display:flex;
    flex-direction:column;
    gap:23px;
    padding-top:14px
  }
  .diagram-label{
    font-size:.75rem;
    color:var(--muted)
  }
  .source-stack .knowledge-node{
    margin-top:auto;
    margin-bottom:12px
  }
  .platform{
    min-width:0;
    padding:15px 20px 20px;
    border:1px solid #d8d8d8;
    border-radius:13px;
    background:#f7f7f7
  }
  .platform-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    font-size:.8125rem;
    font-weight:600;
    margin-bottom:18px
  }
  .diagram-hint{
    color:#777;
    font-weight:400;
    font-size:.75rem
  }
  .platform-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(220px,.94fr);
    gap:20px 28px
  }
  .design-node{
    grid-column:1
  }
  .asset-node{
    grid-column:2
  }
  .consumer-stack{
    grid-column:3;
    grid-row:1 / span 3;
    display:flex;
    flex-direction:column;
    gap:16px
  }
  .consumer-stack .node{
    flex:1
  }
  .runtime-node{
    grid-column:1 / span 2
  }
  .platform-services{
    grid-column:1 / span 2
  }
  .context-layer{
    grid-column:1 / -1
  }
  .architecture-caption{
    display:flex;
    justify-content:space-between;
    gap:25px;
    padding:15px 0 22px 194px
  }
  .architecture-caption p{
    font-size:.875rem;
    color:#535353
  }
  .architecture-caption>span{
    font-size:.75rem;
    color:#777;
    white-space:nowrap
  }
  .strategy-section{
    margin:12px 0 26px
  }
  .page-footer{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    padding:22px 0 26px;
    border-top:1px solid var(--line);
    font-size:.75rem;
    color:#737373
  }
  .page-footer>span{
    padding-top:4px
  }
}
@layer components {
  .view-switch{
    display:flex;
    flex-shrink:0;
    gap:3px;
    padding:4px;
    background:#f3f3f3;
    border:1px solid #d6d6d6;
    border-radius:9px
  }
  .view-switch button{
    border:0;
    background:transparent;
    color:#666;
    border-radius:6px;
    padding:10px 16px;
    font-size:.875rem;
    white-space:nowrap;
    transition:background .2s,color .2s
  }
  .view-switch [aria-pressed="true"]{
    background:#1b1b1b;
    color:white
  }
  .view-switch button:hover:not([aria-pressed="true"]){
    background:#e8e8e8;
    color:#111
  }
  .node{
    position:relative;
    min-width:0;
    text-align:left;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:19px 19px 20px;
    border:1px solid #d9d9d9;
    border-radius:8px;
    background:#fff;
    color:var(--ink);
    transition:border-color .22s,box-shadow .22s
  }
  .node:hover{
    border-color:#777;
    box-shadow:0 3px 12px #00000006
  }
  .node-overline{
    font-size:.75rem;
    color:#6c6c6c;
    margin-bottom:13px
  }
  .node-title{
    display:block;
    font-size:1.1875rem;
    font-weight:550;
    letter-spacing:-.025em;
    line-height:1.25;
    padding-right:10px
  }
  .node-copy{
    display:block;
    font-size:.9375rem;
    line-height:1.5;
    color:#5f5f5f;
    margin-top:11px
  }
  .node-more{
    position:absolute;
    right:10px;
    top:9px;
    font-size:.8125rem;
    color:#8a8a8a;
    line-height:1
  }
  .node:hover .node-more{
    color:#161616
  }
  .source-node,.knowledge-node{
    padding:16px 13px;
    background:#fbfbfb
  }
  .source-stack .node-title{
    font-size:1rem
  }
  .source-stack .node-copy{
    font-size:.875rem;
    line-height:1.6
  }
  .source-stack .node-overline{
    margin-bottom:10px
  }
  .consumer-node{
    padding:15px 17px
  }
  .consumer-node .node-title{
    font-size:1rem
  }
  .consumer-node .node-copy{
    font-size:.875rem;
    margin-top:6px
  }
  .runtime-node{
    padding:15px 19px
  }
  .runtime-node .node-overline{
    margin-bottom:7px
  }
  .runtime-node .node-title{
    font-size:1.125rem
  }
  .runtime-node .node-copy{
    margin-top:8px;
    font-size:.875rem
  }
  .copy-divider{
    color:#b7b7b7;
    margin:0 10px
  }
  .platform-services{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0;
    border:0;
    background:none;
    color:#646464;
    text-align:left;
    font-size:.8125rem
  }
  .platform-services>span>span{
    color:#aaa;
    margin:0 6px
  }
  .platform-services:hover{
    color:#111
  }
  .context-layer{
    min-width:0;
    min-height:104px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    padding:20px 23px;
    text-align:left;
    background:#ededed;
    color:#313131;
    border:1px dashed #c8c8c8;
    border-radius:8px;
    transition:background .28s var(--ease),color .28s,border-color .28s
  }
  .context-layer:hover{
    border-color:#888
  }
  .context-copy{
    display:block;
    animation:reveal .28s var(--ease)
  }
  .context-title{
    display:block;
    font-size:1.1875rem;
    font-weight:550;
    letter-spacing:-.025em
  }
  .context-subtitle{
    display:block;
    margin-top:5px;
    font-size:.9375rem;
    color:#676767
  }
  .context-action{
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:15px;
    font-size:.8125rem;
    color:#6b6b6b
  }
  .context-action>span{
    font-size:1rem
  }
  [data-view="magemetrics"] .context-layer{
    background:#171717;
    border:1px solid #171717;
    color:#fff;
    box-shadow:0 4px 16px #00000008
  }
  [data-view="magemetrics"] .context-title{
    font-size:1.375rem;
    font-weight:600
  }
  [data-view="magemetrics"] .context-subtitle{
    color:#c4c4c4
  }
  [data-view="magemetrics"] .context-action{
    color:#d2d2d2
  }
  [data-view="magemetrics"] .design-node,[data-view="magemetrics"] .asset-node,[data-view="magemetrics"] [data-node="agents"]{
    border-color:#929292
  }
  .connections{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:1;
    pointer-events:none;
    overflow:visible
  }
  .connections path{
    fill:none;
    stroke:#aaa;
    stroke-width:1;
    vector-effect:non-scaling-stroke
  }
  .connections path.context-connection{
    stroke:#292929;
    stroke-width:1.2;
    stroke-dasharray:4 4;
    animation:line-appear .4s
  }
  .connections marker path{
    stroke:none;
    fill:#999
  }
  .connections marker.context-arrow path{
    fill:#222
  }
  summary{
    cursor:pointer;
    list-style:none
  }
  summary::-webkit-details-marker{
    display:none
  }
  #strategy{
    border:1px solid #bcbcbc;
    border-radius:12px;
    background:#fff
  }
  #strategy[open]{
    border-color:#777
  }
  .strategy-section>details>summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    padding:22px 26px;
    background:#f3f3f3;
    border-radius:11px
  }
  .strategy-section>details>summary:hover{
    background:#eaeaea
  }
  .strategy-section>details[open]>summary{
    border-bottom:1px solid #c5c5c5;
    border-radius:11px 11px 0 0
  }
  .strategy-section summary h2{
    font-size:1.3125rem;
    letter-spacing:-.025em
  }
  .strategy-section summary p{
    font-size:.875rem;
    color:#6b6b6b;
    margin-top:6px
  }
  .expand-control{
    display:flex;
    align-items:center;
    gap:12px;
    white-space:nowrap;
    font-size:.8125rem;
    font-weight:550;
    padding:10px 14px;
    border-radius:6px;
    background:#202020;
    color:#fff
  }
  details[open]>summary .expand-control{
    background:#e2e2e2;
    color:#333
  }
  .disclosure-icon{
    position:relative;
    width:16px;
    height:16px;
    flex-shrink:0
  }
  .disclosure-icon::before,.disclosure-icon::after{
    content:"";
    position:absolute;
    background:currentColor;
    inset:7px 2px;
    height:1px
  }
  .disclosure-icon::after{
    transform:rotate(90deg);
    transition:transform .2s
  }
  details[open]>summary .disclosure-icon::after{
    transform:rotate(0)
  }
  .when-open,details[open]>summary .when-closed{
    display:none
  }
  details[open]>summary .when-open{
    display:inline
  }
  .strategy-content{
    padding:26px;
    animation:reveal .25s var(--ease)
  }
  .example-intro{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:32px;
    padding:0 0 24px;
    border-bottom:1px solid var(--line)
  }
  .example-intro h3{
    font-size:1.375rem;
    margin-top:9px
  }
  .example-intro p{
    max-width:500px;
    font-size:.9375rem;
    margin-top:10px;
    color:#5d5d5d
  }
  .example-role{
    padding:18px 22px;
    background:#f4f4f4;
    border-left:2px solid #888;
    border-radius:0 6px 6px 0
  }
  .example-role h3{
    font-size:.875rem;
    font-weight:600;
    letter-spacing:0;
    margin:0
  }
  .example-tabs{
    display:flex;
    gap:5px;
    margin:23px 0 18px
  }
  .example-tabs button{
    display:flex;
    gap:10px;
    align-items:center;
    border:1px solid transparent;
    padding:9px 14px;
    border-radius:6px;
    background:transparent;
    color:#8a8a8a;
    font-size:.75rem
  }
  .example-tabs button span{
    font-size:.875rem;
    color:#616161
  }
  .example-tabs [aria-selected="true"]{
    border-color:#bbb;
    background:#f5f5f5
  }
  .example-tabs [aria-selected="true"] span{
    color:#171717
  }
  .example-tabs button:hover{
    background:#f4f4f4
  }
  .example-panel-inner{
    animation:reveal .2s var(--ease)
  }
  .example-task{
    font-size:1.1875rem;
    line-height:1.4;
    margin:0 0 19px;
    letter-spacing:-.02em
  }
  .example-task small{
    font-size:.75rem;
    font-weight:400;
    color:#777;
    letter-spacing:0;
    margin-left:10px
  }
  .comparison{
    display:grid;
    grid-template-columns:1fr 1fr;
    border:1px solid var(--line);
    border-radius:9px;
    overflow:hidden
  }
  .comparison>div{
    padding:23px 26px
  }
  .comparison>div+div{
    border-left:1px solid var(--line);
    background:#f7f7f7
  }
  .comparison h3{
    font-size:.8125rem;
    font-weight:600;
    margin-bottom:12px
  }
  .comparison p{
    font-size:1rem;
    line-height:1.65;
    color:#585858;
    max-width:570px
  }
  .example-outcome{
    display:flex;
    gap:25px;
    padding:19px 0 0
  }
  .example-outcome>span{
    font-size:.8125rem;
    font-weight:600;
    flex-shrink:0;
    padding-top:3px
  }
  .example-outcome p{
    font-size:1rem
  }
  .example-assumptions{
    margin-top:18px;
    font-size:.8125rem;
    color:#666
  }
  .example-assumptions p{
    max-width:950px;
    line-height:1.65
  }
  .disclosure{
    border:1px solid #d1d1d1;
    border-radius:8px;
    background:#fff
  }
  .disclosure>summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 16px;
    background:#f6f6f6;
    color:#424242;
    border-radius:7px;
    font-size:.875rem
  }
  .disclosure>summary:hover{
    background:#ededed
  }
  .disclosure[open]{
    border-color:#aaa
  }
  .disclosure[open]>summary{
    border-bottom:1px solid var(--line);
    border-radius:7px 7px 0 0
  }
  .disclosure>p{
    padding:16px;
    margin:0
  }
  .strategy-depth{
    margin-top:24px
  }
  .depth-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px 65px;
    padding:22px
  }
  .depth-grid h3{
    font-size:.9375rem;
    margin-bottom:12px
  }
  .depth-grid p{
    font-size:1rem;
    color:#505050
  }
  .depth-grid .secondary{
    font-size:.8125rem;
    line-height:1.65;
    color:#737373;
    margin-top:12px
  }
  .source-details{
    padding:16px
  }
  .source-details p{
    font-size:.8125rem;
    line-height:1.65
  }
  .source-details ul{
    padding-left:18px;
    margin:17px 0;
    line-height:1.9;
    font-size:.8125rem
  }
  .detail-dialog{
    position:fixed;
    inset:0 0 0 auto;
    max-width:min(470px,100%);
    width:470px;
    height:100dvh;
    max-height:100dvh;
    margin:0;
    padding:30px 30px 36px;
    border:0;
    border-left:1px solid #ddd;
    background:#fff;
    color:#171717;
    box-shadow:-15px 0 60px #0000000b;
    overflow:auto;
    overscroll-behavior:contain
  }
  .detail-dialog[open]{
    animation:drawer-in .24s var(--ease)
  }
  .detail-dialog::backdrop{
    background:#00000020
  }
  .dialog-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:40px
  }
  .close-detail{
    border:1px solid #ddd;
    background:#fff;
    border-radius:50%;
    width:34px;
    height:34px;
    font-size:1.4rem;
    font-weight:300;
    line-height:1
  }
  .close-detail:hover{
    background:#f4f4f4
  }
  .detail-dialog h2{
    font-size:1.75rem;
    letter-spacing:-.04em;
    margin-bottom:25px
  }
  .detail-section+.detail-section{
    margin-top:27px;
    padding-top:24px;
    border-top:1px solid #e5e5e5
  }
  .detail-section h3{
    font-size:.75rem;
    color:#737373;
    text-transform:uppercase;
    letter-spacing:.05em;
    margin-bottom:13px
  }
  .detail-section p{
    font-size:1rem;
    line-height:1.7;
    color:#464646
  }
  .detail-section.dark{
    background:#1c1c1c;
    color:#fff;
    border:0;
    padding:21px;
    border-radius:8px
  }
  .detail-section.dark h3{
    color:#b2b2b2
  }
  .detail-section.dark p{
    color:#f0f0f0
  }
  .detail-technical{
    margin-top:28px;
    font-size:.8125rem;
    color:#5e5e5e
  }
  .detail-technical p{
    font-size:.875rem;
    line-height:1.75
  }
  .noscript-message{
    padding:18px;
    background:#eee;
    margin:20px
  }
  @keyframes reveal{
    from{
      opacity:0;
      transform:translateY(3px)
    }
    to{
      opacity:1;
      transform:none
    }
  }
  @keyframes line-appear{
    from{
      opacity:0
    }
    to{
      opacity:1
    }
  }
  @keyframes drawer-in{
    from{
      opacity:0;
      transform:translateX(14px)
    }
    to{
      opacity:1;
      transform:none
    }
  }
}
@layer responsive {
  @media(min-width:1500px){
    .node{
      padding:22px
    }
    .consumer-node{
      padding:17px
    }
    .runtime-node{
      padding:17px 22px
    }
  }
  @media(max-width:1200px){
    .site-header{
      padding:0 28px
    }
    main{
      padding:0 28px
    }
    .diagram{
      grid-template-columns:145px minmax(0,1fr);
      gap:25px
    }
    .platform{
      padding:14px 16px 16px
    }
    .platform-grid{
      gap:19px 24px;
      grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(185px,.96fr)
    }
    .node{
      padding:17px 13px
    }
    .node-title{
      font-size:1.0625rem
    }
    .node-copy{
      font-size:.875rem
    }
    .consumer-node{
      padding:13px
    }
    .consumer-node .node-copy{
      font-size:.8125rem
    }
    .architecture-caption{
      padding-left:170px
    }
    .platform-services{
      font-size:.75rem
    }
    .platform-services>span>span{
      margin:0 3px
    }
    .context-layer{
      padding:18px;
      gap:18px
    }
    .context-subtitle{
      font-size:.875rem
    }
    .copy-divider{
      margin:0 6px
    }
  }
  @media(max-width:980px){
    .diagram{
      grid-template-columns:1fr
    }
    .source-stack{
      display:grid;
      grid-template-columns:1fr 1fr;
      padding-top:0;
      gap:13px
    }
    .diagram-label{
      grid-column:1/-1
    }
    .source-stack .knowledge-node{
      margin:0
    }
    .source-node,.knowledge-node{
      padding:16px
    }
    .connections{
      display:none
    }
    .architecture-caption{
      padding-left:0
    }
    .platform-grid{
      grid-template-columns:1fr 1fr
    }
    .consumer-stack{
      grid-column:1/-1;
      grid-row:auto;
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      order:3
    }
    .runtime-node{
      order:1
    }
    .platform-services{
      order:2
    }
    .context-layer{
      order:4
    }
    .header-note{
      display:none
    }
  }
  @media(max-width:640px){
    .site-header{
      height:59px;
      padding:0 20px
    }
    main{
      padding:0 20px
    }
    .section-intro{
      flex-direction:column;
      align-items:stretch;
      gap:20px;
      padding:25px 0 22px
    }
    .section-intro h1{
      font-size:1.75rem
    }
    .view-switch button{
      flex:1
    }
    .view-switch{
      align-self:stretch
    }
    .source-stack .node-title{
      font-size:.9375rem
    }
    .source-stack .node-copy{
      font-size:.8125rem
    }
    .platform{
      padding:14px
    }
    .platform-heading{
      font-size:.8125rem
    }
    .diagram-hint{
      font-size:.75rem
    }
    .platform-grid{
      grid-template-columns:1fr;
      gap:17px
    }
    .design-node,.asset-node,.runtime-node,.platform-services{
      grid-column:1
    }
    .consumer-stack{
      grid-template-columns:1fr;
      gap:13px
    }
    .node{
      padding:18px
    }
    .node-title{
      font-size:1.125rem
    }
    .node-copy,.consumer-node .node-copy{
      font-size:.9375rem
    }
    .consumer-node .node-title{
      font-size:1.0625rem
    }
    .platform-services{
      font-size:.75rem;
      line-height:1.8
    }
    .context-layer{
      min-height:140px;
      align-items:flex-start;
      flex-direction:column;
      gap:16px
    }
    .context-title{
      font-size:1.125rem
    }
    .context-subtitle{
      font-size:.9375rem
    }
    .context-action{
      font-size:.8125rem
    }
    .architecture-caption{
      flex-direction:column;
      gap:7px;
      padding-bottom:20px
    }
    .architecture-caption p{
      font-size:.8125rem
    }
    .strategy-section>details>summary{
      gap:14px;
      padding:20px;
      flex-direction:column;
      align-items:flex-start
    }
    .strategy-section summary h2{
      font-size:1.1875rem
    }
    .strategy-content{
      padding:20px
    }
    .example-intro{
      grid-template-columns:1fr;
      gap:20px;
      padding:0 0 20px
    }
    .example-intro>div:first-child h3{
      font-size:1.25rem
    }
    .example-tabs{
      gap:2px
    }
    .example-tabs button{
      flex:1;
      flex-direction:column;
      gap:5px;
      padding:9px 7px
    }
    .example-tabs button span{
      font-size:.8125rem
    }
    .comparison{
      grid-template-columns:1fr
    }
    .comparison>div{
      padding:21px
    }
    .comparison>div+div{
      border-left:0;
      border-top:1px solid var(--line)
    }
    .example-task{
      font-size:1.0625rem
    }
    .example-outcome{
      flex-direction:column;
      gap:8px
    }
    .depth-grid{
      grid-template-columns:1fr;
      gap:25px
    }
    .page-footer{
      grid-template-columns:1fr;
      gap:15px;
      padding:20px 0
    }
    .detail-dialog{
      padding:25px
    }
    .dialog-top{
      margin-bottom:32px
    }
  }
  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
      animation:none!important;
      transition:none!important
    }
  }
  @media print{
    .view-switch,.node-more,.context-action,.expand-control,.sources{
      display:none
    }
    .site-header{
      padding:0 0 15px
    }
    main{
      padding:0
    }
    .connections{
      display:none
    }
    .platform,.context-layer{
      print-color-adjust:exact
    }
    .node,.context-layer,.comparison{
      break-inside:avoid
    }
    .detail-dialog{
      display:none
    }
  }
}