*{box-sizing:border-box}html,body,main,#viewport{margin:0;width:100%;height:100%;overflow:hidden}body{background:#f2f2ef;color:#333;font-family:Arial,sans-serif}#viewport{position:absolute;inset:0}canvas{display:block;touch-action:none}.controls{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:7px;background:#ffffffdb;backdrop-filter:blur(12px);border:1px solid #deded8;border-radius:10px;box-shadow:0 4px 24px #00000008;white-space:nowrap}button{border:0;background:none;padding:10px 13px;border-radius:6px;font:12px Arial,sans-serif;color:#777;cursor:pointer}button.active{background:#e8e9e3;color:#292d26}#explode{color:#333}#explode span{margin-left:8px}button:hover{background:#eee}button:focus-visible,input:focus-visible{outline:2px solid #737e60;outline-offset:3px}button:disabled{opacity:.4}.divider{height:20px;width:1px;background:#deded8;margin:0 3px}input{width:95px;accent-color:#717c60;margin:0 10px;cursor:pointer}#selection{position:fixed;top:20px;left:20px;background:#fffffff0;padding:12px 16px;border:1px solid #e1e2da;border-radius:7px;font-size:12px;line-height:1.8;pointer-events:none}#selection small{display:block;color:#777;font-size:10px}#loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#f2f2ef}#loading p{font-size:12px;color:#777;margin-top:20px}.spinner{width:24px;height:24px;border:2px solid #d8dbd1;border-top-color:#757f65;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}[hidden]{display:none!important}@media(max-width:500px){.controls{bottom:16px;gap:0;padding:5px;max-width:calc(100% - 20px)}button{font-size:11px;padding:10px}input{width:60px;margin:0 5px}}

select{font:11px Arial,sans-serif;max-width:112px;padding:9px 4px;border:0;border-radius:5px;background:transparent;color:#666;cursor:pointer}select:focus-visible{outline:2px solid #737e60}@media(max-width:600px){.controls{flex-wrap:wrap;justify-content:center;width:max-content;max-width:calc(100% - 20px)}select{max-width:92px;font-size:10px}input{width:55px}}

.annotations{position:fixed;inset:0;pointer-events:none;overflow:hidden}.diagram-label{position:absolute;transform:translate(7px,-50%);font:9px Arial,sans-serif;letter-spacing:.8px;text-transform:uppercase;color:#63685e;padding:5px 7px;background:#f5f4f0d9;border-left:1px solid #9ca18e;white-space:nowrap}.controls{z-index:3}#labels{font-size:11px}#labels[aria-pressed=false]{opacity:.45}body{background:#f5f4f0}

.diagram-label{font-weight:700;letter-spacing:.45px;font-size:10px}.feature-label{color:#3e474a;background:#f5f4f0eb;border-left:2px solid #9ca18e}

.diagram-label,.feature-label{font-size:10px;line-height:1.5;letter-spacing:.15px;text-transform:none;background:transparent;border:0;padding:3px 0;white-space:normal;transform:translateY(-50%);text-shadow:0 1px 3px #f5f4f0,0 -1px 3px #f5f4f0;color:#4b504a}.diagram-label.feature-label{font-weight:700}#labels{font-size:10px;padding-left:8px;padding-right:8px}

.diagram-label,.feature-label{font-size:11px}

.diagram-label,.feature-label{font-size:10px;font-weight:700;padding:3px 5px;background:#f5f4f0a6;border:0;border-left:1px solid #b1b4a8;border-radius:0;line-height:1.4;text-shadow:none;letter-spacing:.15px}

#scrollHint{font-size:9px;color:#888;padding:0 7px;white-space:nowrap}#zoomIn,#zoomOut{font-size:17px;padding:6px 9px} @media(max-width:600px){#scrollHint{display:none}}

#systemView{max-width:132px;color:#333;font-weight:600}.controls{flex-wrap:wrap;justify-content:center;width:max-content;max-width:calc(100% - 24px)}@media(max-width:800px){#scrollHint{display:none}}