*{margin:0;padding:0;box-sizing:border-box}body{background:#1a1a1a;display:flex;justify-content:center;align-items:center;min-height:100vh;font-family:Inter,sans-serif;padding:20px}.container{background:#000;padding:20px;border-radius:8px}#screen{width:480px;height:180px;background:#000;border:2px solid #333;border-radius:10px;position:relative;overflow:hidden}.controls{margin-bottom:20px;display:flex;justify-content:center;width:480px}.knob-container{display:flex;gap:0;background:#000;border:1px solid #2F2F37;border-radius:4px;padding:0;width:100%;justify-content:space-between;align-items:stretch}.knob-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:15px}.knob-wrapper:not(:last-child){border-right:1px solid #2F2F37}.knob{cursor:pointer;-webkit-user-select:none;user-select:none}.keyboard-info-wrapper{margin-top:15px;display:flex;justify-content:space-between;align-items:center;width:480px}.keyboard-info{text-align:left;color:#666;font-size:11px;font-weight:300}.keyboard-info strong{color:#999;font-weight:300}#keyboard-octave-display{color:#fff;background:#2f2f37;padding:2px 6px;border-radius:2px}.creator-tag{color:#666;font-size:11px;font-weight:300;text-align:right}