:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#0c1520;color:#ecf4fa;--muted: #adbfce;--border: #304558;--accent: #87d8ff}*{box-sizing:border-box}body{margin:0}.masthead,main{width:min(100% - 2rem,86rem);margin-inline:auto}.masthead{display:flex;align-items:center;gap:clamp(.75rem,2vw,1.5rem);padding:clamp(1.5rem,4vw,3rem) 0 1.25rem}.brand-logo{flex:none;display:block;width:clamp(3.5rem,11vw,7rem);height:auto;border-radius:.65rem}h1{color:#fff;font-size:clamp(3rem,8vw,5.5rem);line-height:1;letter-spacing:.06em;margin:0}.masthead .brand-expansion{color:var(--accent);font-weight:650;margin-top:.5rem}small{color:var(--accent);letter-spacing:.1em;font-size:.69rem;font-weight:700}p{color:var(--muted);margin:.4rem 0}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(19rem,24rem);gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border);margin-bottom:1.25rem}.panel{min-width:0;border-radius:.95rem;border:1px solid var(--border);background:#142131;overflow:hidden}.sidebar{display:grid;gap:1rem;min-width:0}.viewer{display:flex;flex-direction:column}.panel-head,.viewer-footer{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.8rem 1rem}.panel-head{border-bottom:1px solid var(--border)}h2,h3{margin:0;font-size:1.125rem}h3 small{margin-left:.4rem}#threejs-container{position:relative;flex:1 0 auto;min-height:clamp(23rem,60vh,46rem);background:#142333}#threejs-container canvas{position:absolute;inset:0;display:block}.viewer-footer{color:var(--muted);font-size:.875rem}.viewer-footer{border-top:1px solid var(--border);flex-wrap:wrap}#joints,.readout,.mqtt{padding:.8rem 1rem}.joint{display:grid;grid-template-columns:5rem minmax(0,1fr) 4.7rem;gap:.6rem;align-items:center;padding:.3rem 0;font-size:.95rem}input{accent-color:var(--accent);min-width:0;font:inherit}input[type=number],button{border:1px solid var(--border);background:#1c3146;color:inherit;border-radius:.45rem;padding:.4rem .5rem}button{cursor:pointer;font:inherit;font-size:.9rem;min-height:2rem}button:hover{background:#274560}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.readout{border-top:1px solid var(--border)}dl{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin:.6rem 0}dl div{background:#0f1c2a;padding:.4rem .55rem;border-radius:.4rem}dt{color:var(--accent);font-size:.8rem}dd{margin:0;font:.95rem ui-monospace,monospace}.trace{font-size:.9rem;margin-right:.5rem}.mqtt p{font-size:1rem;line-height:1.45}#mqtt-form,.mqtt details{margin:.75rem 0}.mqtt label,.mqtt summary{display:block;font-size:.9rem}.mqtt summary{display:list-item;cursor:pointer}.mqtt input{width:100%;margin:.25rem 0 .5rem;padding:.45rem .55rem;color:inherit;background:#0f1c2a;border:1px solid var(--border);border-radius:.4rem}.mqtt-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.5rem}.mqtt-copy input{margin-bottom:.25rem;font-family:ui-monospace,monospace}#mqtt-status{color:var(--muted);font-size:.85rem;margin-left:.35rem}.mqtt pre{margin:.65rem 0 0;padding:.6rem .75rem;overflow:auto;border-radius:.4rem;background:#0f1c2a;color:var(--accent);font-size:.95rem;line-height:1.4}#render-error{padding:1rem}@media(max-width:740px){.workspace{grid-template-columns:minmax(0,1fr)}#threejs-container{min-height:clamp(19rem,52vh,29rem)}}.mqtt p code{overflow-wrap:anywhere}#mqtt-broker,#mqtt-prefix{font-size:.85rem}@media(max-width:380px){.mqtt-copy{grid-template-columns:minmax(0,1fr);justify-items:start}}