:root{--paper:#f6f2e9;--ink:#101010;--muted:#56534d;--line:rgba(16,16,16,.22);--gold:#a97e2c;--panel:#fdfaf3;--mono:"IBM Plex Mono",Consolas,monospace;--display:"Space Grotesk","Segoe UI",sans-serif}
*{box-sizing:border-box}html{background:var(--paper)}body{margin:0;color:var(--ink);font-family:var(--display);font-size:16px}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,.node:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.viewer-shell{max-width:1800px;margin:auto;padding:clamp(1rem,3vw,3rem)}.viewer-head{display:flex;justify-content:space-between;gap:2rem;border-top:1px solid var(--ink);padding:1.2rem 0 1.7rem}.eyebrow,.viewer-tools label,.graph-hint,.detail-muted,.list-head span,footer,.head-count span{font:500 .69rem/1.5 var(--mono);letter-spacing:.055em;text-transform:uppercase}.eyebrow{margin:0 0 .8rem;color:var(--gold)}h1,h2,p{margin-top:0}h1{font-size:clamp(2.3rem,5vw,4.6rem);line-height:1;letter-spacing:-.055em;margin-bottom:1rem}.lede{max-width:52rem;color:var(--muted);line-height:1.55;margin-bottom:0}.head-count{display:grid;grid-template-columns:auto auto;gap:.05rem .55rem;align-content:start;min-width:6rem}.head-count strong{font-size:1.5rem;line-height:1.2}.head-count span{align-self:center;color:var(--muted)}
.viewer-tools{display:flex;align-items:end;gap:1rem;border-top:1px solid var(--line);border-bottom:1px solid var(--ink);padding:1rem 0}.viewer-tools label{display:grid;gap:.38rem;min-width:14rem}.viewer-tools input,.viewer-tools select{height:2.5rem;background:var(--panel);border:1px solid var(--ink);border-radius:0;padding:0 .75rem;color:var(--ink);font:400 .86rem var(--display)}.zoom-tools{display:flex;gap:.35rem;margin-left:auto}.zoom-tools button{min-width:2.5rem;height:2.5rem;padding:0 .8rem;border:1px solid var(--ink);background:var(--paper);color:var(--ink)}.zoom-tools button:hover,.zoom-tools button:focus-visible{background:var(--ink);color:var(--paper)}
.viewer-grid{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:1rem;padding-top:1rem}.graph-frame{position:relative;min-width:0;height:clamp(32rem,69vh,55rem);border:1px solid var(--ink);background-color:#eee9de;background-image:linear-gradient(rgba(16,16,16,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(16,16,16,.045) 1px,transparent 1px);background-size:22px 22px;overflow:hidden}#graph{width:100%;height:100%;display:block;touch-action:none;cursor:grab}#graph.dragging{cursor:grabbing}.graph-hint{position:absolute;left:.6rem;bottom:.6rem;max-width:calc(100% - 1.2rem);padding:.45rem .65rem;background:rgba(246,242,233,.94);border:1px solid var(--line);color:var(--muted)}
.group-frame{fill:rgba(255,255,255,.35);stroke:#8a8578;stroke-width:2;stroke-dasharray:7 5}.group-frame.active{fill:rgba(169,126,44,.09);stroke:var(--gold);stroke-width:3}.group-label{font:500 16px var(--mono);fill:#5b5548;paint-order:stroke;stroke:#eee9de;stroke-width:5}.wire{fill:none;stroke:#7e8790;stroke-width:2.2;opacity:.36;pointer-events:none}.wire.active{stroke:var(--gold);stroke-width:4;opacity:.96}.wire.dimmed{opacity:.055}.node{cursor:pointer}.node rect{fill:#fffaf0;stroke:#2b343b;stroke-width:2}.node.slider rect{fill:#f0e3c7}.node.selected rect{stroke:var(--gold);stroke-width:4;fill:#fff1ca}.node.dimmed{opacity:.23}.node.match rect{stroke:#b06b21;stroke-width:4}.node text{font:500 17px var(--display);fill:#172029;pointer-events:none}.node .category{font:400 10px var(--mono);letter-spacing:.04em;fill:#6e777d}.node .port{fill:#4d6574}.node.selected .port{fill:var(--gold)}
.viewer-aside{display:flex;flex-direction:column;gap:1rem;min-height:0}.detail-panel,.list-panel{border:1px solid var(--ink);padding:1rem;background:var(--panel)}.detail-panel{min-height:18rem}.detail-panel h2{font-size:1.45rem;line-height:1.1;letter-spacing:-.03em;overflow-wrap:anywhere;margin-bottom:.55rem}.detail-muted{color:var(--muted);text-transform:none;letter-spacing:0}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;border-top:1px solid var(--line);padding-top:.8rem}.detail-grid div{min-width:0}.detail-grid dt{font:500 .65rem var(--mono);color:var(--muted);text-transform:uppercase}.detail-grid dd{margin:.2rem 0 0;overflow-wrap:anywhere}.port-list{border-top:1px solid var(--line);margin-top:.8rem;padding-top:.7rem}.port-list h3{font:500 .67rem var(--mono);text-transform:uppercase;letter-spacing:.04em}.port-list ul{list-style:none;padding:0;margin:0}.port-list li{font-size:.78rem;line-height:1.35;padding:.2rem 0;border-bottom:1px dotted var(--line)}.port-list small{display:block;color:var(--muted);font:400 .66rem var(--mono);overflow-wrap:anywhere}.list-panel{flex:1;min-height:0;display:flex;flex-direction:column}.list-head{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}.list-head h2{font-size:1rem}.list-head span{color:var(--muted)}.component-list{max-height:26rem;overflow:auto;display:grid;align-content:start}.component-list button{width:100%;text-align:left;border:0;border-top:1px solid var(--line);padding:.52rem .2rem;background:transparent;color:var(--ink);font-size:.8rem}.component-list button:hover,.component-list button[aria-current="true"]{background:#f0e4ca}.component-list small{display:block;font:400 .64rem var(--mono);color:var(--muted);margin-top:.15rem}footer{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--ink);margin-top:1.3rem;padding-top:.7rem;color:var(--muted)}
@media(max-width:1000px){.viewer-grid{grid-template-columns:1fr}.viewer-aside{display:grid;grid-template-columns:1fr 1fr}.graph-frame{height:34rem}.component-list{max-height:20rem}}@media(max-width:680px){.viewer-shell{padding:1rem}.viewer-head{display:block}.head-count{grid-template-columns:repeat(3,auto auto);gap:.1rem .3rem;margin-top:1.3rem}.viewer-tools{display:grid;grid-template-columns:1fr 1fr}.viewer-tools label{min-width:0}.viewer-tools label:nth-child(2){grid-column:1/-1;grid-row:2}.zoom-tools{grid-column:1/-1;margin-left:0}.zoom-tools button:last-child{flex:1}.viewer-aside{display:block}.list-panel{margin-top:1rem}.graph-frame{height:28rem}.graph-hint{font-size:.58rem}footer{display:block}footer span{display:block;margin-top:.4rem}}