.diagram-canvas{border:1px solid #3e5943;border-radius:20px;background:radial-gradient(ellipse at center,#22382b,#101b16);overflow:hidden}.diagram-canvas svg{display:block;width:100%;height:auto}.diagram-node>rect{fill:#14271e;stroke:#699574;stroke-width:1.5}.diagram-node>circle{fill:#c5f277}.diagram-number{fill:#102012;font:700 20px system-ui}.diagram-label{fill:#ecf4e7;font:500 18px system-ui}.diagram-icon{fill:none;stroke:#c5f277;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.diagram-canvas a:hover .diagram-node>rect,.diagram-canvas a:focus .diagram-node>rect{fill:#294632;stroke:#d4ff9f;stroke-width:3}.diagram-canvas a:focus{outline:none}.diagram-wire{fill:none;stroke:#c5f277;stroke-width:2.5}.diagram-wire.power{stroke:#f2c96d}.diagram-wire.cooling{stroke:#72d6ed;stroke-width:4}.diagram-wire.feedback{stroke:#bda4f3;stroke-dasharray:8 6}.factory-shell{fill:#24382a;stroke:#4c7254;stroke-width:2}.factory-label{font-size:14px;letter-spacing:2px;fill:#abcba7}.diagram-key{display:flex;gap:20px;flex-wrap:wrap;margin:18px 0;font-size:12px;color:#c6d1be}.diagram-key span:before{content:'';display:inline-block;width:22px;height:3px;background:#c5f277;vertical-align:middle;margin-right:8px}.diagram-key .key-power:before{background:#f2c96d}.diagram-key .key-cooling:before{background:#72d6ed}.diagram-key .key-feedback:before{background:#bda4f3}.diagram-explanations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0}.diagram-explanation{padding:20px;border:1px solid #3e5943;border-radius:12px;background:#15231a;scroll-margin-top:130px}.diagram-explanation:target,.diagram-explanation:focus{outline:2px solid #c5f277;outline-offset:2px}.diagram-explanation h3{font-size:17px;line-height:1.5;margin:0 0 10px}.diagram-explanation h3 span{color:#c5f277;margin-right:6px}.diagram-explanation p{font-size:14px;line-height:1.75;color:#bfccb8}.resident-card-note{padding:16px;border-left:3px solid #c5f277;background:#253721;margin-top:20px}.resident-card-note strong{color:#d2fa99}.resident-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:24px 0}.resident-grid>div{padding:24px;border:1px solid #536847;border-radius:14px;background:linear-gradient(140deg,#23351e,#131e19)}.resident-grid strong{display:block;font-size:42px;line-height:1.3;color:#d2fa99;margin:12px 0}.resident-grid p{font-size:14px;line-height:1.7;color:#c6d1be}.resident-context>p{max-width:1050px;line-height:1.8}@media(max-width:700px){.diagram-explanations,.resident-grid{grid-template-columns:1fr}.diagram-label{display:none}.diagram-node>circle{r:25px;cx:26px;cy:27px}.diagram-number{font-size:30px;transform:translate(4px,8px)}.diagram-canvas svg{min-width:0}.diagram-key{gap:12px}.diagram-explanation{scroll-margin-top:140px}.layer-diagram h2{font-size:30px}}

/* The layer palette comes from the same ledger records as the homepage stack. */
.layer-diagram{--diagram-accent:#c5f277;--diagram-border:color-mix(in srgb,var(--diagram-accent) 38%,#26302d)}
.layer-diagram>.eyebrow,.layer-diagram .diagram-explanation h3 span{color:var(--diagram-accent)}
.layer-diagram .diagram-canvas{border-color:var(--diagram-border);background:radial-gradient(ellipse at center,color-mix(in srgb,var(--diagram-accent) 18%,#101715),#101715)}
.layer-diagram .diagram-node>rect{fill:color-mix(in srgb,var(--diagram-accent) 9%,#101715);stroke:color-mix(in srgb,var(--diagram-accent) 65%,#26302d)}
.layer-diagram .diagram-node>circle{fill:var(--diagram-accent)}
.layer-diagram .diagram-icon{stroke:var(--diagram-accent)}
.layer-diagram .diagram-canvas a:hover .diagram-node>rect,.layer-diagram .diagram-canvas a:focus .diagram-node>rect{fill:color-mix(in srgb,var(--diagram-accent) 23%,#101715);stroke:var(--diagram-accent)}
.layer-diagram .diagram-wire.data{stroke:var(--diagram-accent)}
.layer-diagram .diagram-key .key-data:before{background:var(--diagram-accent)}
.layer-diagram .factory-shell{fill:color-mix(in srgb,var(--diagram-accent) 13%,#101715);stroke:var(--diagram-border)}
.layer-diagram .factory-label{fill:color-mix(in srgb,var(--diagram-accent) 65%,#edf3e7)}
.layer-diagram pattern circle{fill:color-mix(in srgb,var(--diagram-accent) 25%,#26302d)}
.layer-diagram .diagram-explanation{border-color:var(--diagram-border);background:color-mix(in srgb,var(--diagram-accent) 7%,#101715)}
.layer-diagram .diagram-explanation:target,.layer-diagram .diagram-explanation:focus{outline-color:var(--diagram-accent)}