@scope (.ecosystem-diagram) {

*{box-sizing:border-box}body{margin:0;background:#070d18;color:#edf0f5;font-family:Arial,sans-serif}main{max-width:1200px;margin:auto;padding:32px 24px 60px}h1{font-size:30px;margin:8px 0 12px}header p{color:#b6c2d3;line-height:1.6;max-width:800px}nav{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 40px}nav a{border:1px solid #617697;padding:12px 18px;border-radius:24px;color:#bfd3f7;text-decoration:none}section{margin-bottom:52px;scroll-margin-top:20px}.label{color:#dbbf7c;font:700 13px/1.5 monospace;letter-spacing:.13em}.caption{color:#acbbce;font-size:15px;line-height:1.6}.diagram{padding:28px;border:1px solid #41526a;border-radius:18px;background:radial-gradient(ellipse at 50% 0,#20375766,transparent 70%),#0b1422}.brand{text-align:center}.brand img{width:50px;vertical-align:middle;margin-right:12px}.brand strong{font:400 27px Georgia,serif}.brand small{display:block;color:#aabdd7;margin:10px 0}.node{border:1px solid #56769e;background:#101e30;border-radius:10px;padding:20px;text-align:center}.node h3{margin:0 0 12px;font:400 23px Georgia,serif;color:#e4cd94}.node p{margin:8px 0;color:#c4cede;font-size:14px;line-height:1.5}.node small{color:#90b4e8;font-size:12px}.branch{height:45px;width:67%;margin:auto;border:1px solid #7999c2;border-bottom:0;position:relative;margin-top:32px}.branch:before{content:'';position:absolute;left:50%;top:-32px;height:32px;border-left:1px solid #7999c2}.branch:after{content:'';position:absolute;left:50%;height:45px;border-left:1px solid #7999c2}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.outside{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px;padding-top:20px;border-top:1px dashed #667487}.outside article{display:flex;align-items:center;gap:16px;padding:14px;border:1px solid #665d46;border-radius:9px;background:#14171c}.outside img{width:48px;height:56px;object-fit:contain}.outside h4{margin:0 0 7px;color:#e1c98e}.outside p{margin:0;color:#bdc6d2;font-size:13px;line-height:1.5}.ribbon{display:flex;justify-content:space-between;border-bottom:1px solid #435773;padding-bottom:18px;gap:18px}.ribbon span{color:#a4b5ca;font-size:13px}.lane{display:grid;grid-template-columns:160px 1fr;gap:22px;align-items:center;margin-top:20px}.lane-title{color:#ddc389;font:400 23px Georgia,serif}.lane-content{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.lane-content .node{text-align:left;padding:16px}.bridge{color:#a8bdd7;text-align:center;font:13px monospace;padding:14px}.flow{display:grid;grid-template-columns:1fr 70px 1fr 70px 1fr;align-items:center;margin-top:22px}.arrow{text-align:center;color:#d8bf7c;font-size:25px}.arrow small{display:block;font-size:10px;line-height:1.5;color:#bbc9da}.footer-note{font-size:12px;color:#94a5bb;line-height:1.5;margin:18px 0 0}.map-layout{display:grid;grid-template-columns:1fr 1.3fr;gap:24px;margin-top:24px}.map-layout .node{height:100%}.group-label{font:12px monospace;color:#a5bddf;text-align:center;padding:12px}.map-layout .stack{display:grid;gap:16px}.mini-flow{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:18px;padding:14px;border-top:1px solid #526a89;color:#c6d5e7;font-size:13px}a:focus-visible{outline:3px solid #dbbf7c;outline-offset:4px}@media(max-width:720px){.three,.outside,.map-layout,.lane-content{grid-template-columns:1fr}.branch{display:none}.three{margin-top:24px}.lane{grid-template-columns:1fr;gap:12px}.flow{grid-template-columns:1fr}.arrow{transform:none;padding:12px}.diagram{padding:20px}.ribbon{flex-direction:column}}


.columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.pillar{border:1px solid #50698b;border-radius:12px;overflow:hidden;background:#0b1523}.pillar>header{padding:20px 16px;text-align:center;border-bottom:1px solid #50698b;background:#19293e}.pillar>header small{font:12px monospace;color:#a8c5ec}.pillar h2{font:400 24px Georgia,serif;color:#e1c98e;margin:9px 0 0}.inside{padding:16px;display:grid;gap:12px}.inside .node{padding:15px 12px}.inside .node h3{font:600 17px Arial,sans-serif;margin-bottom:8px;color:#e7edf6}.inside .node p{font-size:13px}.connector{text-align:center;font:12px/1.5 monospace;color:#b5ccec}.connector b{display:block;font-size:24px;color:#d9bd78}.application small{display:block;margin-top:8px;color:#acbcd0}.outside-label{color:#b4c0d0;font:12px monospace;letter-spacing:.1em;margin:24px 0 -8px}.legend{padding:14px 18px;border-left:2px solid #c8ad70;margin-top:20px;color:#b9c6d8;font-size:13px;line-height:1.6}.branch{margin-top:36px}.branch-label{text-align:center;color:#aabed9;font:12px monospace;margin:18px 0 -20px}.footer-note a{color:#bbcff0}@media(max-width:760px){.columns{grid-template-columns:1fr}.branch-label{margin-bottom:15px}.branch{display:none}}


.inside .project-node{display:block;padding:0;overflow:hidden;text-decoration:none;transition:border-color .15s,box-shadow .15s}.project-banner{display:block;width:100%;aspect-ratio:3/1;object-fit:contain;background:#050910}.project-copy{padding:14px 12px}.project-copy h3 span{font-size:12px;color:#cdb477}.inside .project-node:hover{border-color:#dec482;box-shadow:0 0 0 1px #dec482}.inside .brand-kempo{background:#14110e;border-color:#756344}.inside .brand-kempo h3{font:400 24px Georgia,serif;letter-spacing:.1em;color:#e6d6b7}.inside .brand-twin-compass{background:linear-gradient(120deg,#11282b,#1d182c);border-color:#547e86}.inside .brand-twin-compass h3{color:#dec387}.inside .brand-arcane-os,.inside .brand-arcane-os-sdk{background:#0b0d19;border-color:#525974}.inside .brand-arcane-os h3,.inside .brand-arcane-os-sdk h3{font:400 20px Georgia,serif;letter-spacing:.05em}.inside .brand-precrisis{background:#0b2130;border-color:#438c9a}.inside .brand-precrisis h3{color:#7dd6e7}.inside .brand-redress{background:#141c25}.inside .brand-sentinel{background:#0b1c21}.outside a{color:inherit;text-decoration:none}.outside a:hover{text-decoration:underline}@media(prefers-reduced-motion:reduce){.inside .project-node{transition:none}}

.brand { display: block; color: #edf0f5; } .brand img { height: auto; } .pillar > header { margin: 0; } .diagram { margin: 0; } .inside .caption { margin: 0; } .project-node { color: #edf0f5; }
}
.ecosystem-diagram .brand img { display: inline-block; }
.ecosystem-diagram .brand small { margin: 12px 0 0; font: 400 15px/1.5 var(--sans); letter-spacing: .015em; }
.ecosystem-diagram .branch { margin-top: 44px; }
.ecosystem-diagram .branch::before { top: -28px; height: 28px; }