.muon-figure { max-width:900px; margin:1.8rem auto; color:#333; font-family:"DejaVu Sans",system-ui,sans-serif; }
.muon-figure [hidden] { display:none!important; }
.muon-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.8rem; }
.muon-header h4 { font-size:1rem; margin:0; font-weight:500; }
.muon-figure button { font:inherit; font-size:.78rem; color:#555; border:1px solid #ccc; border-radius:4px; background:white; padding:.25rem .5rem; }
.muon-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; user-select:none; -webkit-user-select:none; }
.muon-panel { min-width:0; }
.muon-panel h5 { font-size:.87rem; text-align:center; margin:0 0 .2rem; font-weight:600; }
.muon-figure svg { display:block; width:100%; height:auto; overflow:hidden; }
.muon-figure svg text { font-family:"DejaVu Sans",system-ui,sans-serif; fill:#444; font-size:14px; }
.muon-figure .muon-small { font-size:12px; }
.muon-figure .muon-drag { touch-action:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; cursor:grab; }
.muon-figure .muon-drag[data-dragging=true] { cursor:grabbing; outline:none; }
.muon-figure :focus-visible { outline:2px solid #278474; outline-offset:3px; }
.muon-controls { display:flex; flex-wrap:wrap; gap:1rem 2rem; margin:.5rem 0; }
.muon-controls label { display:block; flex:1 1 180px; max-width:420px; font-size:.82rem; }
.muon-controls label>span { display:flex; justify-content:space-between; gap:1rem; }
.muon-controls output { font-variant-numeric:tabular-nums; color:#246f63; }
.muon-controls input { display:block; width:100%; min-height:28px; accent-color:#278474; }
.muon-legend { display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; font-size:.76rem; margin:.4rem 0 .8rem; }
.muon-legend span { display:inline-flex; align-items:center; gap:.4rem; }
.muon-legend i { width:1.3rem; border-top:3px solid; }
.muon-hint { font-size:.75rem; color:#666; margin:.3rem 0 .6rem; }
.muon-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media(max-width:560px) { .muon-panels { grid-template-columns:1fr; gap:.8rem; } .muon-controls { gap:.6rem; } .muon-header { align-items:start; } }
@media(max-width:560px) { .muon-figure svg text { font-size:16px; } .muon-figure svg text.muon-small { font-size:14px; } }
@media print { .muon-controls,.muon-header button,.muon-hint { display:none; } }