@import url('./tokens.css');
* { box-sizing:border-box; }
body { margin:0; padding:0 24px; background:var(--canvas); color:var(--text-primary); font-family:Inter,'Open Sans',Arial,sans-serif; }
header { min-height:88px; display:flex; align-items:center; gap:32px; max-width:1920px; margin:auto; padding:16px 8px; }
.signature { font-size:32px; font-weight:400; letter-spacing:-2px; }
h1 { font-size:24px; font-weight:500; line-height:1.2; margin:0 0 4px; letter-spacing:-.025em; }
header p { font-size:14px; margin:0; color:var(--text-secondary); }
.header-note { margin-left:auto; text-align:right; font:11px/1.6 ui-monospace,Consolas,monospace; text-transform:uppercase; letter-spacing:.07em; color:var(--text-secondary); }
.header-note small { display:block; margin-top:8px; font-size:10px; color:var(--text-tertiary); }
main { max-width:1920px; margin:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--blue-field); border-radius:4px; overflow:hidden; }
.composition { padding:16px 12px 8px; min-width:0; border-right:1px solid var(--blue-field); border-bottom:1px solid var(--blue-field); }
.composition:nth-child(3n) { border-right:0; }
.composition:nth-last-child(-n+3) { border-bottom:0; }
.caption { display:flex; align-items:baseline; gap:16px; min-height:48px; padding-inline:0 4px; }
.number { font-size:16px; font-weight:400; color:var(--text-tertiary); }
h2 { font-size:15px; line-height:1.25; font-weight:500; margin:0 0 4px; letter-spacing:-.015em; }
.caption p { font-size:12px; line-height:1.4; color:var(--text-secondary); margin:0; }
.architecture { display:block; width:100%; height:auto; overflow:visible; }
.definitions { position:absolute; width:0; height:0; overflow:hidden; }
.icon { fill:none; stroke:var(--blue-structure); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.object,.material-component { fill:var(--canvas); stroke:var(--blue-structure); stroke-opacity:.24; stroke-width:1; }
.material-system { fill:var(--blue-field); stroke:var(--blue-structure); stroke-opacity:.4; stroke-width:1; }
.group-bracket { fill:none; stroke:var(--blue-structure); stroke-opacity:.3; stroke-width:1; }
.field { fill:var(--blue-field); stroke:var(--blue-structure); stroke-opacity:.18; stroke-width:1; }
.boundary { fill:var(--canvas); stroke:var(--blue-structure); stroke-opacity:.18; stroke-width:1; }
.flow { fill:none; stroke:var(--blue-structure); stroke-width:1.5; stroke-opacity:.7; stroke-linecap:round; stroke-linejoin:round; }
.secondary-flow { stroke-dasharray:4 4; stroke-opacity:.5; }
.object-title { fill:var(--text-primary); font-size:10px; font-weight:500; }
.label { fill:var(--text-primary); font-size:11px; }
.note { fill:var(--text-secondary); font-size:9px; }
.annotation { fill:var(--text-secondary); font-size:10px; }
footer { display:flex; justify-content:space-between; gap:16px; max-width:1920px; margin:auto; padding:16px 8px; font:10px/1.4 ui-monospace,Consolas,monospace; color:var(--text-tertiary); }
@media(min-width:1800px) { h2 { font-size:17px; }.caption p { font-size:14px; } }
@media(max-width:1150px) { main { grid-template-columns:repeat(2,minmax(0,1fr)); }.composition:nth-child(3n){border-right:1px solid var(--blue-field)}.composition:nth-child(2n){border-right:0}.composition:nth-last-child(-n+3){border-bottom:1px solid var(--blue-field)}.composition:nth-last-child(-n+2){border-bottom:0}.header-note{display:none} }
@media(max-width:700px) { body{padding-inline:12px}header{gap:16px}h1{font-size:20px}header p{font-size:12px}main{grid-template-columns:1fr}.composition:nth-child(n){border-right:0;border-bottom:1px solid var(--blue-field)}.composition:last-child{border-bottom:0}.caption{gap:12px}footer{flex-wrap:wrap}footer span:nth-child(2){display:none} }