html,body,#root{margin:0;padding:0;height:100%;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#f0f2f5;color:#333;overflow-x:hidden}header{background-color:#fff;padding:1rem;text-align:center;box-shadow:0 2px 6px #0000001a;position:sticky;top:0;z-index:1000}header h1{margin:0;font-size:2.2rem;color:#1976d2}.navbar{background-color:#1976d2;padding:.8rem;display:flex;gap:2rem;justify-content:center;position:sticky;top:72px;z-index:999}.navbar a{color:#fff;text-decoration:none;font-weight:500;font-size:1.1rem;padding:.4rem 1rem;border-radius:6px;transition:background-color .3s}.navbar a:hover{background-color:#0f59aa}.controls{padding:1.5rem;background-color:#fff;display:flex;flex-direction:column;gap:1.5rem;box-shadow:0 2px 6px #0000000d;margin-bottom:12px}.controls .row{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.controls input[type=number],.controls input[type=range]{padding:.5rem;border-radius:6px;border:1px solid #ccc;font-size:1rem}.controls button{background-color:#1976d2;color:#fff;border:none;padding:.6rem 1.4rem;border-radius:6px;font-size:1rem;cursor:pointer;transition:background-color .25s ease}.controls button:hover{background-color:#145ba4}.slider-row{align-items:center;gap:2rem}.audio-toggle label{font-size:1rem;display:flex;align-items:center;gap:.5rem}.bar-container{display:flex;align-items:flex-end;height:50vh;width:100%;padding:1rem;box-sizing:border-box;background-color:#fff;overflow-x:auto;overflow-y:hidden;border-top:1px solid #ccc}.bar{margin:0 1px;transition:height .2s,background-color .2s;display:flex;justify-content:center;align-items:flex-end}.bar-label{position:absolute;bottom:-20px;font-size:13px;color:#333;-webkit-user-select:none;user-select:none}@media (max-width: 768px){.controls .row{flex-direction:column;align-items:center}.bar-label{font-size:11px}.navbar{flex-direction:column}}