:root{--carbon:#121613;--paper:#f1efe7;--slip:#e8e5db;--cobalt:#1849c6;--signal:#d6f05f;--proof:#ad3f27}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;font-family:Arial,sans-serif;background:var(--carbon)}body{display:grid;grid-template-columns:minmax(280px,38%) minmax(0,62%)}canvas{display:block;width:100%;height:100%}#canvas{background:var(--slip);border-right:1px solid var(--paper)}#network{background:var(--carbon)}.docket{position:absolute;z-index:4;top:0;left:0;right:0;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;border:1px solid var(--carbon);background:rgba(241,239,231,.94);color:var(--carbon);pointer-events:none;font:700 .64rem/1.3 monospace;letter-spacing:.06em}.docket div{display:flex;flex-wrap:wrap;gap:.65rem 1.2rem}.docket strong{color:var(--cobalt)}.docket>span{color:var(--proof)}.vertical-buttons{position:absolute;z-index:5;top:68px;left:calc(38% - 1px);display:grid;transform:translate(-100%);border:1px solid var(--carbon)}button{min-width:128px;min-height:42px;padding:.65rem .75rem;border:0;border-bottom:1px solid var(--carbon);background:var(--paper);color:var(--carbon);cursor:pointer;font:700 .56rem/1.2 monospace}button:last-child{border-bottom:0}button:hover,button:focus-visible{background:var(--signal);outline:0}.legend{position:absolute;z-index:4;right:1rem;bottom:1rem;display:flex;flex-wrap:wrap;border:1px solid var(--paper);background:rgba(18,22,19,.88);color:var(--paper);pointer-events:none}.legend span{padding:.7rem .8rem;font:700 .56rem/1.2 monospace;letter-spacing:.04em}.legend span+span{border-left:1px solid rgba(241,239,231,.4);color:var(--signal)}@media (max-width:680px){body{grid-template-columns:44% 56%}.docket>span{display:none}.vertical-buttons{left:44%}.legend{left:1rem;right:auto}.legend span:first-child{display:none}button{min-width:110px}}