html,body{background-color:#fff;margin:0;font-family:system-ui,sans-serif}#app{flex-direction:column;height:100vh;display:flex}header{border-bottom:1px solid #ddd;align-items:baseline;gap:1rem;padding:.5rem 1rem;display:flex}header h1{margin:0;font-size:1.25rem}#main{flex:1;min-height:0;display:flex}#scene{flex:1;min-width:0}#panel{border-left:1px solid #ddd;flex-shrink:0;width:280px;padding:1rem;overflow-y:auto}.readout{text-align:center;margin-bottom:1.5rem}.readout .symbol{font-size:3rem;font-weight:700;line-height:1}.readout .name{color:#444;font-size:1.1rem}.readout .details{color:#666;margin-top:.5rem;font-size:.9rem}.particle-row{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.particle-row .label{align-items:center;gap:.5rem;display:flex}.particle-row .swatch{border-radius:50%;width:12px;height:12px;display:inline-block}.swatch.proton{background:#e63946}.swatch.neutron{background:#9aa0a6}.swatch.electron{background:#1d6fe0}.particle-row .count{text-align:center;width:2.5ch;font-weight:700}.particle-row button{cursor:pointer;width:2rem;height:2rem;font-size:1.1rem}.particle-row button:disabled{cursor:not-allowed;opacity:.4}