:root{color-scheme:light;font-family:Arial,Helvetica,sans-serif;color:#172a32;background:#fff}
*{box-sizing:border-box}html,body,main{margin:0;width:100%;height:100%;overflow:hidden}main{display:flex;flex-direction:column}
.toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:9px;padding:8px 12px;font-size:13px;flex:none}
.secondary{padding-top:0}.board-controls,.zoom-controls,.separation-controls,.poses{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.board-controls{gap:14px}
label{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}input{accent-color:#307689}input[type=checkbox]{margin:0}input[type=range]{width:128px}output{min-width:40px;font-variant-numeric:tabular-nums}
button{font:inherit;color:#172a32;background:#fff;border:1px solid #c8d3d6;border-radius:3px;padding:6px 10px;cursor:pointer}button:hover,button:focus-visible{background:#eff6f5}button[aria-pressed=true]{background:#e5f0f6;border-color:#6c9caf;color:#17495c}
.stage{position:relative;flex:1;min-height:0;background:radial-gradient(ellipse at center,#fff,#f0f6f8);border-top:1px solid #dce6e9;border-bottom:1px solid #dce6e9}
canvas{width:100%;height:100%;display:block;touch-action:none;outline-offset:-3px}#status{position:absolute;left:0;right:0;top:45%;text-align:center;margin:0;color:#53656b;font-size:14px}
.board-label{position:absolute;display:none;pointer-events:none;font-size:12px;font-weight:600;background:rgba(255,255,255,.88);padding:3px 6px;border-radius:3px;color:#355a6b;transform:translate(-50%,-50%);white-space:nowrap}
.caption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0;padding:7px 12px 3px;font-size:11px;line-height:1.35;color:#456473;flex:none}.scope{margin:0;padding:1px 12px 7px;font-size:11px;line-height:1.3;color:#65777e;flex:none}
[hidden]{display:none!important}@media(max-width:650px){.toolbar{font-size:12px;padding:7px 8px;gap:7px}.secondary{padding-top:0}.board-controls{gap:9px}.separation-controls{gap:5px}input[type=range]{width:90px}.caption{padding-left:8px;padding-right:8px}.scope{padding-left:8px;padding-right:8px}.poses button{padding:5px 8px}}

.metric-scale{position:absolute;left:14px;bottom:12px;pointer-events:none;background:#ffffffe0;padding:7px 9px 3px;border-radius:3px;text-align:center;font-size:11px;color:#355a6b}.metric-scale>div{height:6px;border:solid #355a6b;border-width:0 1px 1px;margin-bottom:3px}.toolbar{padding:6px 9px;font-size:12px}.toolbar.secondary{padding-top:0}.toolbar button{padding:5px 8px}.board-label{font-size:11px}.scope{font-size:10px}.board-controls{gap:10px}input[type=range]{width:85px}