*{box-sizing:border-box}body{margin:0;padding:20px;font-family:IBM Plex Mono,Consolas,monospace;background:#0a0a0f;color:#e0e0e0;min-height:100vh}h1{color:#00d4aa;margin-bottom:.5em}h2{color:#ff6b6b;font-size:1.1em;margin-top:1.5em;margin-bottom:.5em}.controls{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:20px;align-items:center}.control-group{display:flex;flex-direction:column;gap:4px}.control-group label{font-size:.8em;color:#888}input[type=number],select{background:#1a1a2e;border:1px solid #333;color:#e0e0e0;padding:8px 12px;border-radius:4px;font-family:inherit;width:100px}button{background:#00d4aa;color:#0a0a0f;border:none;padding:10px 20px;border-radius:4px;cursor:pointer;font-family:inherit;font-weight:700}button:hover{background:#0fc}button.secondary{background:#333;color:#e0e0e0}button.secondary:hover{background:#444}.canvases{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:20px}.canvas-container{background:#111;border:1px solid #333;border-radius:8px;padding:15px}.canvas-container h3{margin:0 0 10px;font-size:.9em;color:#888}canvas{display:block;width:100%;image-rendering:pixelated;border-radius:4px}.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;margin-top:20px}.metric{background:#1a1a2e;padding:15px;border-radius:8px;text-align:center}.metric-value{font-size:1.5em;color:#00d4aa;font-weight:700}.metric-label{font-size:.8em;color:#888;margin-top:5px}.info{background:#1a1a2e;border-left:3px solid #00d4aa;padding:15px;margin-top:20px;font-size:.9em;line-height:1.6}.formula{font-family:Times New Roman,serif;font-style:italic;color:#fc0}.tabs{display:flex;gap:10px;margin-bottom:20px}.tab{padding:10px 20px;background:#1a1a2e;border:1px solid #333;border-radius:4px;cursor:pointer;color:#888}.tab.active{background:#00d4aa;color:#0a0a0f;border-color:#00d4aa}